动态添加ID到输入字段

当我点击添加时，如何将动态ID添加到表格内的每个字段？例如，总是显示的第一行是checkbox0，input0，select0，并且单击添加按钮时下一行的ID将是checkbox1，input1，select1等。动态添加ID到输入字段

以下是我的代码：

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

来源

2012-08-27 user1301737

使用jQuery是一个选项？ – davidbuzatto

这可能做的伎俩

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; 
}

jsFiddle demo

编辑

正如@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>

来源

2012-08-27 20:21:45

注意：由于“”和“”实际上位于'childNodes [1]'处。 – bfavaretto

@bfavaretto：好点，把它固定在我的小提琴演示中。谢谢 –

试试这个：

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++; 
      } 

     } 
    }

而在你的第一个函数的末尾添加它。

来源

2012-08-27 20:26:07

即使知道你没有说你可以使用jQuery，我发布了一个解决方案。看一看。

HTML：

<table> 
    <tbody id="tableBody"> 
    </tbody> 
</table>

的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/

来源

2012-08-27 20:28:14 davidbuzatto

如果我想为每一行添加两个单选按钮，它会是$ row.append（$（“”）.append（$ radio），$ radio））; ，以便一个单选按钮可以是一个是列和另一个没有列 – user1301737

试试这个：var $ cell = $（“”）; $ cell.append（$ radio1）; $ cell.append（$ radio2）; $ row.append（$ cell）; – davidbuzatto

动态添加ID到输入字段

回答

相关问题