动态向输入字段添加ID
[英]Dynamically add id's to input fields
问题描述
How can I add an id dynamically to each field inside of the table when I click on add? 
单击添加时，如何动态地向表中的每个字段添加ID？ For example, the first row that always shows up would be checkbox0, input0, select0, and the ids of the next row when the add button is clicked would be checkbox1, input1, select1, etc. 例如，始终显示的第一行将是checkbox0，input0，select0，单击添加按钮时下一行的ID将是checkbox1，input1，select1等。
Below is my code: 下面是我的代码：
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
alert("rowCount " +rowCount);
alert("row " +row);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD><INPUT type="text" name="txt"/></TD>
<TD>
<SELECT name="country">
<OPTION value="in">India</OPTION>
<OPTION value="de">Germany</OPTION>
<OPTION value="fr">France</OPTION>
<OPTION value="us">United States</OPTION>
<OPTION value="ch">Switzerland</OPTION>
</SELECT>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
3 个解决方案
解决方案1
4 已采纳 2012-08-27 20:21:45
This could do the trick 这可以解决问题
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
newcell.childNodes[0].id = "input" + rowCount;
break;
case "checkbox":
newcell.childNodes[0].checked = false;
newcell.childNodes[0].id = "checkbox" + rowCount;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
newcell.childNodes[0].id = "select" + rowCount;
break;
}
EDIT 编辑
As pointed out by @bfavaretto, you'll need to remove leading white spaces on select cell 正如@bfavaretto指出的那样，您需要删除select单元格上的前导空白
<TD><SELECT name="country">
<OPTION value="in">India</OPTION>
<OPTION value="de">Germany</OPTION>
<OPTION value="fr">France</OPTION>
<OPTION value="us">United States</OPTION>
<OPTION value="ch">Switzerland</OPTION>
</SELECT>
</TD>
解决方案2
1 2012-08-27 20:28:14
Even knowing that you didn't say that you can use jQuery, I'm posting an solution with it. 即使知道您没有说可以使用jQuery，我仍在发布解决方案。 Take a look. 看一看。
HTML: HTML：
<table>
<tbody id="tableBody">
</tbody>
</table>
JavaScript: JavaScript：
var $tableBody = $( "#tableBody" );
for ( var i = 0; i < 10; i++ ) {
var $row = $( "<tr></tr>" );
var $textInput = $( "<input type='text' id='text_" + i + "'/>" );
var $checkbox = $( "<input type='checkbox' id='check_" + i + "'/><span> Checkbox " + i + "</span>" );
$row.append( $( "<td></td>" ).append( $textInput ) );
$row.append( $( "<td></td>" ).append( $checkbox ) );
$tableBody.append( $row );
}
jsFiddle: http://jsfiddle.net/davidbuzatto/C8CRW/ jsFiddle： http : //jsfiddle.net/davidbuzatto/C8CRW/
解决方案3
0 2012-08-27 20:26:07
Try this: 尝试这个：
function setIds() {
var id = 0;
for (var i = 0; i < document.getElementsByTagName("input").length; i++) {
if (document.getElementsByTagName("input")[i].type == "text") {
document.getElementsByTagName("input")[i].id = "text_" + id;
id++;
}
}
}
And add it at the end of your first function. 并将其添加到您的第一个功能的末尾。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.