Home/ Questions/Q 8440191
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T08:13:14+00:00

How can I add an id dynamically to each field inside of the table

  • 0

How can I add an id dynamically to each field inside of the table when I click on add? 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.

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    jsFiddle demo

    EDIT

    As pointed out by @bfavaretto, you’ll need to remove leading white spaces on select cell

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