Question

当我点击添加时，如何动态地将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>

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

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

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

        }
    }

并在第一个功能结束时添加它。

动态地将id添加到输入字段

3 个答案: