Javascript ASK: javascript – dynamically add id's to input fields

Monday, August 27, 2012

javascript – dynamically add id's to input fields

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>