CODEWITHSUNDEEP
javascriptdynamichtml-tablerows
user1301737
user1301737

Reputation: 77

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>

Upvotes: 1

Views: 4270

Answers (3)

Claudio Redi
Claudio Redi

Reputation: 68400

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>

Upvotes: 4

davidbuzatto
davidbuzatto

Reputation: 9424

Even knowing that you didn't say that you can use jQuery, I'm posting an solution with it. Take a look.

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/

Upvotes: 1

Hanlet Esca&#241;o
Hanlet Esca&#241;o

Reputation: 17370

Try this:

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

        }
    }

And add it at the end of your first function.

Upvotes: 0

Related Questions