现在我要求能够动态添加table行,用js可以实现
然后想在后台获取table每一行内的textbox等控件的值,然后自己设置参数赋值,如何实现,跪求
代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!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 language="javascript" type="text/javascript"> //使用clone方式来生成一行,targetTable是需要添加行的table的ID,sourceTable是clone对象 //talbe的ID,即复制sourceTable的第一行插入到targetTable中,完成增加行的操作 function insertRow(targetTable,sourceTable) { var oTBODY = document.getElementById(targetTable).tBodies.item(0); var oTBODYData = document.getElementById(sourceTable).tBodies.item(0); var rowsCount = oTBODYData.rows.length; for(var i=0;i<rowsCount;i++){ oTBODY.appendChild(oTBODYData.rows[i].cloneNode(true)); } } function deleteRow(Field,targetTable){ var findex = getElementOrder(Field)-1;//此处减1是因sourceTable中有一行是隐藏的 document.getElementById(targetTable).deleteRow(findex); } // 查询出将要删除的行所在的位置index function getElementOrder(field){ var i = 0; var order = 0; var elements = document.getElementsByName(field.name); for(i=0;i<elements.length;i++){ order++; if(elements[i]==field){ break; } } return order; } </script></head>
<body>
<form id="form1" runat="server">
<div>
<table id="sourceTable" style="display: none;">
<tr>
<td>
<input type="text" name="username">
</td>
<td>
<input type="password" name="password">
</td>
<td>
<input type="text" name="age">
</td>
<td>
<input type="button" name="deleteButton" value="删除" onclick="deleteRow(this,'targetTable')">
</td>
</tr>
</table>
<table id="targetTable">
<tr>
<td>
用户名
</td>
<td>
密码
</td>
<td>
年龄
</td>
<td>
</td>
</tr>
<tfoot>
<tr>
<td colspan="4" align="right">
<input type="button" value="增加行" onclick="insertRow('targetTable','sourceTable');">
</td>
</tr>
</tfoot>
</table>
</div>
</form>
</body>
</html>
然后想在后台获取table每一行内的textbox等控件的值,然后自己设置参数赋值,如何实现,跪求
代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!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 language="javascript" type="text/javascript"> //使用clone方式来生成一行,targetTable是需要添加行的table的ID,sourceTable是clone对象 //talbe的ID,即复制sourceTable的第一行插入到targetTable中,完成增加行的操作 function insertRow(targetTable,sourceTable) { var oTBODY = document.getElementById(targetTable).tBodies.item(0); var oTBODYData = document.getElementById(sourceTable).tBodies.item(0); var rowsCount = oTBODYData.rows.length; for(var i=0;i<rowsCount;i++){ oTBODY.appendChild(oTBODYData.rows[i].cloneNode(true)); } } function deleteRow(Field,targetTable){ var findex = getElementOrder(Field)-1;//此处减1是因sourceTable中有一行是隐藏的 document.getElementById(targetTable).deleteRow(findex); } // 查询出将要删除的行所在的位置index function getElementOrder(field){ var i = 0; var order = 0; var elements = document.getElementsByName(field.name); for(i=0;i<elements.length;i++){ order++; if(elements[i]==field){ break; } } return order; } </script></head>
<body>
<form id="form1" runat="server">
<div>
<table id="sourceTable" style="display: none;">
<tr>
<td>
<input type="text" name="username">
</td>
<td>
<input type="password" name="password">
</td>
<td>
<input type="text" name="age">
</td>
<td>
<input type="button" name="deleteButton" value="删除" onclick="deleteRow(this,'targetTable')">
</td>
</tr>
</table>
<table id="targetTable">
<tr>
<td>
用户名
</td>
<td>
密码
</td>
<td>
年龄
</td>
<td>
</td>
</tr>
<tfoot>
<tr>
<td colspan="4" align="right">
<input type="button" value="增加行" onclick="insertRow('targetTable','sourceTable');">
</td>
</tr>
</tfoot>
</table>
</div>
</form>
</body>
</html>
js是没有办法动态添加服务器控件的,
这点必须明确!你用js动态添加的行,
只能是html标签,
一旦提交到后台,
再刷新,就会全部消失!!
上面已经说过不能动态获取WEB控件
可参考
var cell1=row.insertCell();
cell1.innerHTML=" <input type='text' id='txt'>"; <table id="tab" width="300" border="1" cellpadding="0" cellspacing="0"
borderColorLight="black" borderColorDark="white">
<tr><td>
</td></tr>
</table>
或
var oTable = window.document.createElement("table");
oTable.border = 1;
var oTR = oTable.insertRow();
var oTD = oTR.insertCell();
oTD.innerText = "";
oTD = oTR.insertCell();
oTD.rowSpan = 2;
oTD.innerText = "";
oTR = oTable.insertRow();
oTD = oTR.insertCell();
oTD.innerText = "";
document.body.appendChild(oTable);