asp.net 点击按钮生成表格一行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title></title>
   <style>
   *{ margin:0; padding:0; font-size:13px;}
    body {background:#fff;font-size:13px;font-family:宋体,Verdana;color:#666;height:100%; width:100%}
    select{width:120px;}
   </style>
   </head>
<script type="text/javascript">
    var index = 1;
    function addContorl()
    {
        var divContorl = document.createElement("div");
        divContorl.style.cssText = "width:770px;height:25px; margin:5px; ";
        divContorl.id="divContorl_"+index;
        divContorl.innerHTML = "<input type='text' value='"+index+"' onkeyup='setLength(this)'> <input type='text' value='"+index+"'><input type='text' value='"+index+"'><input type='button' value='删除' onclick='removeContorl("+index+")'>";
        document.getElementById("div_contorls").appendChild(divContorl);
        index++;
    }
    function removeContorl(contorlIndex)
    {
        var divContorl =    document.getElementById("divContorl_"+contorlIndex);
         document.getElementById("div_contorls").removeChild(divContorl);
    }
    function setLength(objText){
        alert(objText.value.length);
    }
function getPoint(e,obj){
e=e||event;
var x=getOffsetX(e);
if(obj.offsetWidth/2 > x ){
alert(-1);// 左
}else{
alert(1); // 右
}
} function getOffsetX(evt){
     if( evt.offsetX ) return evt.offsetX;

     var ele = evt.target || evt.srcElement;
     var o = ele;

     var x=0;
     while( o.offsetParent )
     {
             x += o.offsetLeft;
             o=o.offsetParent;
     }
     // 处理当元素处于滚动之后的情况
    var left = 0;
     while( ele.parentNode )
     {
            left += ele.scrollLeft;
             ele=ele.parentNode;
     }

     return evt.pageX + left - x;
}


</script>


<body>

<textarea  id="txtProDesc" cols="45" rows="5" runat="server" class="validate[required,length[1,500]"]   onkeyup="document.getElementById('spanLength').innerHTML=this.value.length"></textarea>

            <br />限<span class="spanred">500</span>个中文字符,您已输入<span class="spanred" id="spanLength">25</span>个字符。
<input type=text onkeypress="getKeyCodes(event)" />
<div style="width:980px; height:auto; margin:10px auto;border:1px solid blue;">
<div style="width:800px; height:auto;border:1px solid #eee;  margin-left:100px; ">
<div style="width:750px;height:20px; margin:10px;"> <a href="javascript:addContorl();">添加</a></div>
<div id="div_contorls" style="width:780px;height:auto; margin:10px;border:1px solid red;">
</div>
<div  style="width:780px;height:auto; margin:10px;border:1px solid green; line-height:22px;" onclick='getPoint(event,this);'><div id="div_LanguageList" style="width:760px;margin:10px;height:auto; " >
    <div  style="width:760px; height:25px;margin:5px;" >
      语言名称：<select ><option value='语言1' selected=selected>语言1</option><option value='语言2'>语言2</option><option value='语言3'>语言3</option></select>    语言能力：<select ><option value='能力1' selected=selected>能力1</option><option value='能力2'>能力2</option><option value='能力3'>能力3</option></select>
   </div>
</div>
<div style="width:760px;height:25px;margin:5px; ">
    <a href="javascript:void(0);" onclick="addLang()">添加新语言</a>    <a href="javascript:void(0);" onclick="submitLangs()">提交</a>
</div></div>
</div>
<a href="javascript:void(0);"  onclick="openChat('http://www.baidu.com')">链接baidu</a>
<p></p>
<div class="kk" id="divKK" >
<div class="m" onclick="show()">x</div>
  <ul class="z" id="sL" style="background-color:Blue;">
  <li>yyyyyyy</li>
  <li>yyyyyyy</li>
  <li>yyyyyyy</li>
  <li>yyyyyyy</li>
  <li>yyyyyyy</li>
  </ul>
</div>
</body>
<script type="text/javascript">
var langNameHtml = "<option value='1' selected=selected>语言1</option><option value='2'>语言2</option><option value='3'>语言3</option>";
var langLevelHtml = "<option value='能力1' selected=selected>能力1</option><option value='能力2'>能力2</option><option value='能力3'>能力3</option>";
    var div_LanguageList;
    function addLang()
    {
         var divContorl = document.createElement("div");
          divContorl.style.cssText = "width:760px; height:25px;margin:5px;";
        divContorl.innerHTML = "语言名称：<select>"+langNameHtml+"</select>    语言能力：<select >"+langLevelHtml+"</select>    <a href='javascript:void(0);' onclick='deleteLang(this)'>删除</a>";
       div_LanguageList.appendChild(divContorl);
    }
    function deleteLang(obj)
    {
       obj.parentNode.parentNode. removeChild(obj.parentNode);
    }
    function submitLangs()
    {
        var slcList = div_LanguageList.getElementsByTagName("select");
        var pram=[];
        for(var i=0;i<slcList.length;i+=2)
        {
            pram.push('langName:'+slcList[i].value +'\tlangLevel:'+slcList[i+1].value );
        }
        alert("值："+pram.join("\n"));
    }
   ( function(){
     div_LanguageList = document.getElementById("div_LanguageList");
   })();

</script></html>

你用repeater就行了，点击后自动刷新一下就会多一条，这个功能我刚刚做过，就是用这种方法实现的

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="fundraising.Login" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" language="javascript">
        function addTr() {
            var listTable = document.getElementById("list");
            var listTbody = listTable.childNodes[0];
            var listTr = document.createElement("tr");
            var listTd1 = document.createElement("td");
            var listTd2 = document.createElement("td");
            var listTd3 = document.createElement("td");
            listTd1.innerHTML = "<input name='centerStation' type='text'/>";
            listTd2.innerHTML = "<input name='getTime' type='text'/>";
            listTd3.innerHTML = "<input type='button' onclick='delTr(this)' value='删除' />";
            listTr.appendChild(listTd1);
            listTr.appendChild(listTd2);
            listTr.appendChild(listTd3);
            listTbody.appendChild(listTr);
        }        function delTr(obj) {
            obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
        }
    </script>
    <style type="text/css">
    #list{ border-collapse:collapse; width:500px;}
    #list tr th{ background:#F0F5FB}
    #list tr th,#list tr td{ border:slid 1px #EDEDED;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
            <table id="list">
            <tr><th>中途站名</th><th>到站时刻</th><th>操作</th></tr>
            </table>
    </div>
    </form>
</body>
</html>带删除方法的

使用JS最好，因为这样不会刷新。不刷新则前面输入的值依然存在。
<script type="text/javascript" language="javascript">
var rows=1;
function addRow(tableName) //传你的表名,就是你要给它增加行的表
  {
    var row=tableName.insertRow(tableName.rows.length);
    rows++;
    var col;
      col=row.insertCell(0);
      col.innerHTML=rows;
      col=row.insertCell(1);
      col.innerHTML="<input type='text' readonly class='box2' id='' name='name"+rows+"'/>";
      col=row.insertCell(2);
      col.innerHTML="<img  style='' src='' alt=''/></a>";

  }
</script>

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dynamicAdd.aspx.cs" Inherits="WebApp.dynamicAdd" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>    <script type="text/javascript">
        function addFile() {
            var _table = document.createElement("table");
            var _tbody = document.createElement("TBODY");
            var _row;
            var _cell;
            var rlen = parseInt(document.getElementById("rowlen").value);
            for (var i = 0; i < rlen; i++) {
                _row = document.createElement("tr");
                for (var j = 0; j < 3; j++) {
                    _cell = document.createElement("td");
                    var div = document.createElement("div");
                    var f = document.createElement("input");
                    f.setAttribute("type", "text")
                    f.setAttribute("name", "txtCardNo")
                    f.setAttribute("size", "20")
                    div.appendChild(f)
                    var d = document.createElement("input");
                    d.setAttribute("type", "button")
                    d.setAttribute("onclick", "deteFile(this)");
                    d.setAttribute("value", "移除")
                    div.appendChild(d)
                    _cell.appendChild(div);
                    _row.appendChild(_cell);
                }
                _tbody.appendChild(_row);
            }
            _table.appendChild(_tbody);
            var con = document.getElementById("_container");
            con.innerHTML = "";
            con.appendChild(_table);
        }        function deteFile(o) {
            while (o.tagName != "DIV") o = o.parentNode;
            o.parentNode.removeChild(o);
        }        function getAllTd() {
            document.getElementsByTagName("td")[0].style.backgroundImage = 'url(http://img.baidu.com/img/logo-zhidao.gif)';
        }
    </script></head>
<body>
    <form id="form1" runat="server">
    <select id="rowlen">
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <input value="add" type="button" onclick="addFile()" />
    <div id="_container">
    </div>
    <input type="button" value="ok" onclick="getAllTd()" />
    </form>
</body>
</html>后台用
if (!string.IsNullOrEmpty(Request["txtCardNo"])) {
                    string[] strCardes = Request["txtCardNo"].Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
                    foreach (string strCard in strCardes) {
                        //to do
                    }
                }

在后台获取值时，你要循环当前Table的行数。后台获取客户端控件的值我在vb中是这样写的。 For i As Integer = 1 To rowCount '循环当前Table的行数
If (Request.Form("name" & i)<>"") Then '判断他的值是否为空
Dim str as string= Request.Form("name" & i)
End If
Next

后台通过  Request.Form["文本框名字"]获取控件值，不过要在添加input是为每个文本框添加不同的名字，我改了下js代码，刚才的对火狐兼容也有点问题,修改了下：后台使用Request.Form["centerStation1"] 数字1为添加的第几行了
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="fundraising.TestPage" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" language="javascript">
        function addTr() {
            var listTable = document.getElementById("list");
            var listTbody = listTable.lastChild;
            var trNum;
            navigator.userAgent.toLowerCase().indexOf('firefox') > 0 ? trNum = listTbody.childNodes.length - 1 : trNum = listTbody.childNodes.length; //使火狐和IE生成相同的name
            var listTr = document.createElement("tr");
            var listTd1 = document.createElement("td");
            var listTd2 = document.createElement("td");
            var listTd3 = document.createElement("td");
            listTd1.innerHTML = "<input name='centerStation" + trNum + "' type='text'/>";
            listTd2.innerHTML = "<input name='getTime" + trNum + "' type='text'/>";
            listTd3.innerHTML = "<input type='button' onclick='delTr(this)' value='删除' />";
            listTr.appendChild(listTd1);
            listTr.appendChild(listTd2);
            listTr.appendChild(listTd3);
            listTbody.appendChild(listTr);
        }        function delTr(obj) {
            obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
        }
    </script>
    <style type="text/css">
        #list
        {
            border-collapse: collapse;
            width: 500px;
        }
        #list tr th
        {
            background: #F0F5FB;
        }
        #list tr th, #list tr td
        {
            border: slid 1px #EDEDED;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" onclick="addTr()" value="添加" />
        <table id="list">
            <tr>
                <th>
                    中途站名
                </th>
                <th>
                    到站时刻
                </th>
                <th>
                    操作
                </th>
            </tr>
        </table>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
    </div>
    </form>
</body>
</html>

我就是动态添加行，添加了多少行，我就要获取多少行的数据，但我不知道怎么获取table一共生成了多少行啊，你告诉我的只能限定死想要知道的一行数据而已。

调试易

asp.net 点击按钮生成表格一行

解决方案 »