动态添加 id 到输入字段答案

【问题标题】：Dynamically add id's to input fields动态添加 id 到输入字段
【发布时间】：2023-11-26 18:31:01
【问题描述】：

当我点击添加时，如何为表格内的每个字段动态添加 id？例如，始终显示的第一行将是 checkbox0、input0、select0，而单击添加按钮时下一行的 id 将是 checkbox1、input1、select1 等。

下面是我的代码：

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

【问题讨论】：

标签： javascript dynamic html-table rows

【解决方案1】：

这可以解决问题

 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>

【讨论】：

注意：<select> 实际上会在childNodes[1]，因为<td> 和<select> 之间有空格。

【解决方案2】：

即使知道你没有说你可以使用 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/

【讨论】：

如果我想在每一行添加两个单选按钮，它会是 $row.append( $( "" ).append( $radio), $radio)) ;这样一个单选按钮可以是是列，另一个是否列
试试这个： var $cell = $( "" ); $cell.append($radio1); $cell.append($radio2); $row.append($cell);

【解决方案3】：

试试这个：

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

        }
    }

并将其添加到您的第一个函数的末尾。

【讨论】：