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

liuxin_0725 2010-11-22 01:09:44

aspx页面上有一个表格
列如

然后我要每次点一下添加按钮的时候变成
http://hi.csdn.net/attachment/201011/22/5614328_12904024549ORa.jpg

反正就是每次点击都要生成一行。

应该这么做？而且怎么获取它生成的文本框输入的值

求代码，希望写全希望有注释

...全文

270 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

liuxin_0725 2010-11-22

打赏
举报

[Quote=引用 12 楼 mingl11 的回复:]
引用 9 楼 liuxin_0725 的回复:
引用 7 楼 mingl11 的回复:
HTML code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="fundraising.Login" %>

<!DOCTYPE html PUBLIC "-//W3C//DT……
[/Quote]

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

mingl11 2010-11-22

打赏
举报

[Quote=引用 9 楼 liuxin_0725 的回复:]
引用 7 楼 mingl11 的回复:
HTML code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="fundraising.Login" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/……
[/Quote]
后台通过 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>

paul_its 2010-11-22

打赏
举报

[Quote=引用 8 楼 vanceinfo_zhao 的回复:]
使用JS最好，因为这样不会刷新。不刷新则前面输入的值依然存在。
<script type="text/javascript" language="javascript">
var rows=1;
function addRow(tableName) //传你的表名,就是你要给它增加行的表
{
var row=tableName.insertRow(tableName.rows.lengt……
[/Quote]

在后台获取值时，你要循环当前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

fellowcheng 2010-11-22

打赏
举报

<%@ 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

                    }

                }

liuxin_0725 2010-11-22

打赏
举报

[Quote=引用 7 楼 mingl11 的回复:]
HTML code

<%@ 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.o……
[/Quote]

怎么获取文本框的值呀

paul_its 2010-11-22

打赏
举报

使用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>

mingl11 2010-11-22

打赏
举报



<%@ 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>



带删除方法的

师太请留步 2010-11-22

打赏
举报

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

liuxin_0725 2010-11-22

打赏
举报

还有个啊，点删除按钮的时候删除那行

巧巧 2010-11-22

打赏
举报

en 2楼的很详细啊

ycproc 2010-11-22

打赏
举报

楼上很详细了

hch126163 2010-11-22

打赏
举报



<!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>