读书人
栏目▼

怎么获取table中动态添加行的控件和它

发布时间： 2012-04-22 18:34:46 作者： rapoo

如何获取table中动态添加行的控件和它的值
我的代码如下：

客户端代码：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<script language="javascript">
// Example: obj = findObj("image1");
function findObj(theObj, theDoc)
{
var p, i, foundObj;

if(!theDoc) theDoc = document;
if( (p = theObj.indexOf("?")) > 0 && parent.frames.length)
{
theDoc = parent.frames[theObj.substring(p+1)].document;
theObj = theObj.substring(0,p);
}
if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj];
for (i=0; !foundObj && i < theDoc.forms.length; i++)
foundObj = theDoc.forms[i][theObj];
for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)
foundObj = findObj(theObj,theDoc.layers[i].document);
if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj);

return foundObj;
}

//添加一个参与人填写行
function AddSignRow(){
//读取最后一行的行号，存放在txtTRLastIndex文本框中
var txtTRLastIndex = findObj("txtTRLastIndex",document);
var rowID = parseInt(txtTRLastIndex.value);
//alert(txtTRLastIndex.value);
var tbNew = findObj("tbNew",document);
if(parseInt(tbNew.rows.length) < 6)
{
//添加行
var newTR = tbNew.insertRow(tbNew.rows.length);
newTR.id = "SignItem" + rowID;

//添加列:序号
var newNameTD=newTR.insertCell(0);
newNameTD.width ="30";
newNameTD.style.bgcolor ="White";
//添加列内容
newNameTD.innerHTML = newTR.rowIndex.toString();

//添加列:设备类别
var newConfigurationType=newTR.insertCell(1);
newConfigurationType.width ="60";
//添加列内容
newConfigurationType.innerHTML = "<input name='txtConfigurationType" + rowID + "' id='txtConfigurationType" + rowID + "' type='text' size='6' />";

//添加列:设备型号
var newConfigurationScale=newTR.insertCell(2);
newConfigurationScale.width ="60";
//添加列内容
newConfigurationScale.innerHTML = "<input name='txtConfigurationScale" + rowID + "' id='txtConfigurationScale" + rowID + "' type='text' size='6' />";

//添加列:申请数量
var newCountTD=newTR.insertCell(3);
newCountTD.width ="60";
//添加列内容
newCountTD.innerHTML = "<input name='txtCount" + rowID + "' id='txtCount" + rowID + "' type='text' size='6' />";

//添加列:使用人
var newConfigurationUserTD=newTR.insertCell(4);
newConfigurationUserTD.width ="60";
//添加列内容
newConfigurationUserTD.innerHTML = "<input name='txtConfigurationUser" + rowID + "' id='txtConfigurationUser" + rowID + "' type='text' size='6' />";

//添加列:申请原因
var newAppReasonsTD=newTR.insertCell(5);
newAppReasonsTD.width ="60";
//添加列内容
newAppReasonsTD.innerHTML = "<input name='txtAppReasons" + rowID + "' id='txtAppReasons" + rowID + "' type='text' size='6' />";

//添加列:申请类别
var newAppTypeTD=newTR.insertCell(6);
newAppTypeTD.width ="60";
//添加列内容
newAppTypeTD.innerHTML = "<input name='txtAppType" + rowID + "' id='txtAppType" + rowID + "' type='text' size='6' />";



//添加列:新增原因
var newAddReasonsTD=newTR.insertCell(7);
newAddReasonsTD.width ="60";
//添加列内容
newAddReasonsTD.innerHTML = "<input name='txtAddReasons" + rowID + "' id='txtAddReasons" + rowID + "' type='text' size='15' />";


//添加列:删除按钮
var newDeleteTD=newTR.insertCell(8);
newDeleteTD.width ="30";
//添加列内容
newDeleteTD.innerHTML = "<div align='center' style='width:30px'><a href='javascript:;' onclick=\"DeleteSignRow('SignItem" + rowID + "')\">删除</a></div>";

//将行号推进下一行
txtTRLastIndex.value = (rowID + 1).toString() ;
}
else
{
alert('一次性最多添加5条数据！');
}
}

//删除指定行
function DeleteSignRow(rowid){
var tbNew = findObj("tbNew",document);
var signItem = findObj(rowid,document);

//获取将要删除的行的Index
var rowIndex = signItem.rowIndex;

//删除指定Index的行
tbNew.deleteRow(rowIndex);

//重新排列序号，如果没有序号，这一步省略
for(i=rowIndex;i<tbNew.rows.length;i++){
tbNew.rows[i].cells[0].innerHTML = i.toString();
}
}
//清空列表
function ClearAllSign(){
if(confirm('确定要清空所有参与人吗？')){
var tbNew = findObj("tbNew",document);
var rowscount = tbNew.rows.length;

//循环删除行,从最后一行往前删除
for(i=rowscount - 1;i > 0; i--){
tbNew.deleteRow(i);
}

//重置最后行号为1
var txtTRLastIndex = findObj("txtTRLastIndex",document);
txtTRLastIndex.value = "1";

//预添加一行
AddSignRow();
}
}

</script>

</head>
<body>
<div>
<table width="613" border="0" cellpadding="2" cellspacing="1" id="tbNew" runat="server" style="background-color: #8CB3D0">
<tr id="trHeader">
<td width="30" align="center" bgcolor="White">
序号
</td>
<td width="60" align="center" bgcolor="White">
设备类别
</td>
<td width="60" align="center" bgcolor="White">
设备型号
</td>
<td width="60" align="center" bgcolor="White">
申请数量
</td>
<td width="60" align="center" bgcolor="White">
使用人
</td>
<td width="60" align="center" bgcolor="White">
申请原因
</td>
<td width="60" align="center" bgcolor="White">
申请类别
</td>
<td width="100" align="center" bgcolor="White">
新增原因
</td>
<td width="30" align="center" bgcolor="White">
 
</td>


</tr>
</table>
</div>
<div>
<input type="button" name="Submit" value="添加参与人" onclick="AddSignRow()" />
<input type="button" name="Submit2" value="清空" onclick="ClearAllSign()" />

<asp:Button ID="btnAddAsset" runat="server" OnClick="btnAddAsset_Click" Text ="提交数据" />
<input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />
</div>
</body>
</html>

服务端代码：
protected void btnAddAsset_Click(object sender, EventArgs e)
{
HtmlTable tbNew = (HtmlTable)this.Page.FindControl("tbNew");
for (int i = 1; i < tbNew.Rows.Count; i++)//这里的tbNew.Rows.Count值总是1
{}
}

在这里要如何获取table中的某行某列的控件和它的值？？？？

[解决办法]
每一列 都有单独的 排序 ID 或者主键ID吧
[解决办法]
你前面部分都是 JS 代码，你值也直接用JS获取后，存入一个 隐藏input里。

在你需要获取的容器集合外添加一个容器ID 你这里可以去 tbNew

var tbNew = document.getElementById("tbNew");
var AllInput = tbNew.getElementsByTagName("input"); //该容器内的所有input控件
for (i = 0; i < AllInput.length; i++) { //用这方法获取元素个数。


}

[解决办法]
js代码：
<script type="text/javascript" language="javascript">
function Add(id)
{
var addTd = document.getElementById(id);

var addTables = addTd.getElementsByTagName("table");
for(var addTable in addTables)
{
if(addTables[addTable].className=="addtable")
{
addTd.innerHTML += addTables[addTable].outerHTML;
return;
}
}
}
</script>


html代码：
<TABLE border=0 cellSpacing=0 cellPadding=0 width="100%" class="addtable">
<TBODY>
<TR>
<TD class=jobcontent colSpan=2>时间： <SELECT
class=inputText name=yearStartTrain> <OPTION selected
value=1980>1980</OPTION> <OPTION value=1981>1981</OPTION> <OPTION
value=1982>1982</OPTION> <OPTION value=1983>1983</OPTION> <OPTION
value=1984>1984</OPTION> <OPTION value=1985>1985</OPTION> <OPTION
value=1986>1986</OPTION> <OPTION value=1987>1987</OPTION> <OPTION
value=1988>1988</OPTION> <OPTION value=1989>1989</OPTION> <OPTION
value=1990>1990</OPTION> <OPTION value=1991>1991</OPTION> <OPTION
value=1992>1992</OPTION> <OPTION value=1993>1993</OPTION> <OPTION
value=1994>1994</OPTION> <OPTION value=1995>1995</OPTION> <OPTION
value=1996>1996</OPTION> <OPTION value=1997>1997</OPTION> <OPTION
value=1998>1998</OPTION> <OPTION value=1999>1999</OPTION> <OPTION
value=2000>2000</OPTION> <OPTION value=2001>2001</OPTION> <OPTION
value=2002>2002</OPTION> <OPTION value=2003>2003</OPTION> <OPTION
value=2004>2004</OPTION> <OPTION value=2005>2005</OPTION> <OPTION


value=2006>2006</OPTION> <OPTION value=2007>2007</OPTION> <OPTION
value=2008>2008</OPTION> <OPTION value=2009>2009</OPTION> <OPTION
value=2010>2010</OPTION></SELECT> 年<SELECT
class=inputText name=monthStartTrain> <OPTION selected
value=1>1</OPTION> <OPTION value=2>2</OPTION> <OPTION
value=3>3</OPTION> <OPTION value=4>4</OPTION> <OPTION
value=5>5</OPTION> <OPTION value=6>6</OPTION> <OPTION
value=7>7</OPTION> <OPTION value=8>8</OPTION> <OPTION
value=9>9</OPTION> <OPTION value=10>10</OPTION> <OPTION
value=11>11</OPTION> <OPTION value=12>12</OPTION></SELECT> 月 —
<SELECT class=inputText name=yearEndTrain>
<OPTION selected value=1980>1980</OPTION> <OPTION
value=1981>1981</OPTION> <OPTION value=1982>1982</OPTION> <OPTION
value=1983>1983</OPTION> <OPTION value=1984>1984</OPTION> <OPTION
value=1985>1985</OPTION> <OPTION value=1986>1986</OPTION> <OPTION
value=1987>1987</OPTION> <OPTION value=1988>1988</OPTION> <OPTION
value=1989>1989</OPTION> <OPTION value=1990>1990</OPTION> <OPTION
value=1991>1991</OPTION> <OPTION value=1992>1992</OPTION> <OPTION
value=1993>1993</OPTION> <OPTION value=1994>1994</OPTION> <OPTION
value=1995>1995</OPTION> <OPTION value=1996>1996</OPTION> <OPTION
value=1997>1997</OPTION> <OPTION value=1998>1998</OPTION> <OPTION
value=1999>1999</OPTION> <OPTION value=2000>2000</OPTION> <OPTION
value=2001>2001</OPTION> <OPTION value=2002>2002</OPTION> <OPTION
value=2003>2003</OPTION> <OPTION value=2004>2004</OPTION> <OPTION
value=2005>2005</OPTION> <OPTION value=2006>2006</OPTION> <OPTION
value=2007>2007</OPTION> <OPTION value=2008>2008</OPTION> <OPTION
value=2009>2009</OPTION> <OPTION value=2010>2010</OPTION></SELECT>
年<SELECT class=inputText name=monthEndTrain>
<OPTION selected value=1>1</OPTION> <OPTION value=2>2</OPTION>
<OPTION value=3>3</OPTION> <OPTION value=4>4</OPTION> <OPTION
value=5>5</OPTION> <OPTION value=6>6</OPTION> <OPTION
value=7>7</OPTION> <OPTION value=8>8</OPTION> <OPTION
value=9>9</OPTION> <OPTION value=10>10</OPTION> <OPTION
value=11>11</OPTION> <OPTION value=12>12</OPTION></SELECT> 月</TD></TR>
<TR>
<TD class=jobcontent>培训项目：<INPUT name=txtXmTrain
type=text class=inputText size="22"></TD>
<TD class=jobcontent>培训机构及讲师：<INPUT
name=txtJsTrain type=text class=inputText size="22"></TD></TR>
<TR>
<TR>
<TD class=jobcontent colSpan=2>取得职业资格或认证：<INPUT name=txtRzTrain


type=text class=inputText size="66"></TD>
</TR>
</TBODY></TABLE></TD></TR>
<tr>
<TD class=jobtitle colspan="4"><input type="button" value=" 继续添加 " onclick="Add('tdTrain')"></TD></tr>
<TBODY>
</table>
后台代码：
/// <summary>
/// 得到培训经历
/// </summary>
/// <returns></returns>
string GetTrain()
{
string retVal = "";
string txtXmTrains = Request.Form["txtXmTrain"];
if (!string.IsNullOrEmpty(txtXmTrains.Replace(",", "")))
{
string[] yearStartTrain = Request.Form["yearStartTrain"].Split(',');
string[] monthStartTrain = Request.Form["monthStartTrain"].Split(',');
string[] yearEndTrain = Request.Form["yearEndTrain"].Split(',');
string[] monthEndTrain = Request.Form["monthEndTrain"].Split(',');
string[] txtXmTrain = txtXmTrains.Split(',');
string[] txtJsTrain = Request.Form["txtJsTrain"].Split(',');
string[] txtRzTrain = Request.Form["txtRzTrain"].Split(',');
for (int i = 0; i < txtXmTrain.Length; i++)
{
retVal += yearStartTrain[i] + "." + monthStartTrain[i] + "至" + yearEndTrain[i] + "." + monthEndTrain[i] + " " + txtXmTrain[i] + " " + txtJsTrain[i] + " " + txtRzTrain[i] + "<br />";
}
}
return retVal;
}

读书人网 >asp.net

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net