Javascript 动态添加id'；输入字段的_Javascript_Dynamic_Html Table_Rows

Javascript 动态添加id'；输入字段的

javascript dynamic

Javascript 动态添加id'；输入字段的,javascript,dynamic,html-table,rows,Javascript,Dynamic,Html Table,Rows,单击add时，如何将id动态添加到表中的每个字段？例如，始终显示的第一行是checkbox0、input0、select0，单击add按钮时，下一行的ID是checkbox1、input1、select1等下面是我的代码： <HTML> <HEAD> <TITLE> Add/Remove dynamic rows in HTML table </TITLE> <SCRIPT language="javascript">

单击add时，如何将id动态添加到表中的每个字段？例如，始终显示的第一行是checkbox0、input0、select0，单击add按钮时，下一行的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>


在HTML表中添加/删除动态行
函数addRow（tableID）{
var table=document.getElementById（tableID）；
var rowCount=table.rows.length；
var row=table.insertRow（rowCount）；
警报（“行计数”+行计数）；
警报（“行”+行）；
var colCount=table.rows[0].cells.length；
对于（var i=0；i这可能会起作用
 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;
 }


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


印度
德国
法国
美国
瑞士
这就可以了
 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;
 }


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


印度
德国
法国
美国
瑞士
试试这个：
    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++;
            }

        }
    }

函数setIds（）{
var-id=0；
对于（var i=0；i

并将其添加到第一个函数的末尾。
尝试以下操作：
    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++;
            }

        }
    }

函数setIds（）{
var-id=0；
对于（var i=0；i

并将其添加到第一个函数的末尾。
即使知道您没有说您可以使用jQuery，我也发布了一个解决方案。看一看
HTML:
<table>
    <tbody id="tableBody">
    </tbody>
</table>

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



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

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

var$tableBody=$（“#tableBody”）；
对于（变量i=0；i<10；i++）{
var$row=$（“”）；
var$textInput=$（“”）；
var$checkbox=$（“checkbox”+i+”）；
$row.append（$（“”）.append（$textInput））；
$row.append（$（“”）.append（$checkbox））；
$tableBody.append（$row）；
}

jsFiddle:
即使知道您没有说过可以使用jQuery，我还是发布了一个解决方案。看一看
HTML:
<table>
    <tbody id="tableBody">
    </tbody>
</table>

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



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

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

var$tableBody=$（“#tableBody”）；
对于（变量i=0；i<10；i++）{
var$row=$（“”）；
var$textInput=$（“”）；
var$checkbox=$（“checkbox”+i+”）；
$row.append（$（“”）.append（$textInput））；
$row.append（$（“”）.append（$checkbox））；
$tableBody.append（$row）；
}

jsiddle:
注意：
实际上位于子节点[1]
，因为
和
之间有空格。注意：
实际上位于子节点[1]
因为
和
之间有空格。如果我想给每行添加两个单选按钮，它是$row.append（$（“”）。append（$单选），$radio））；这样一个单选按钮可以是yes列，另一个是no列尝试以下操作：var$cell=$（“”）；$cell.append（$radio1）；$cell.append（$radio2）；$row.append（$cell）；如果我想给每行添加两个单选按钮，它是$row.append（$（“”）。append（$radio），$radio））；这样一个单选按钮可以是yes列，另一个是no列尝试以下操作：var$cell=$（“”）；$cell.append（$radio1）；$cell.append（$radio2）；$row.append（$cell）；