javascriptdynamichtml-tablenewrow

Javascript: Add New Row To Table, skip th elements


Awhile back, I found the following javascript function that allows you to dynamically add a row to a table:

function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

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

Does anyone, that actually has javascript experience (cause I have almost none) that could write a fix that will skip over the <th> tags?

Here's the part of the table I don't want to be affected:

<table id="scheduler">
  <tr>
    <th scope="col">Engineer</th>
    <th scope="col">Monday</th>
    <th scope="col">Tuesday</th>
    <th scope="col">Wednesday</th>
    <th scope="col">Thursday</th>
    <th scope="col">Friday</th>
    <th scope="col">Saturday</th>
    <th scope="col">Sunday</th>
  </tr>

My problem is that when I have the <th> tags in, the header row ends up being the row that gets "cloned", not the row that just has <td> tags in it.


Solution

  • Just change the function so you can specify which row you want to duplicate (given a zero-based index).

    addRow( "scheduler", 1 ); // to base it on the 2nd row
    
      // give row number------v
    function addRow(tableID, num) {
        var table = document.getElementById(tableID);
    
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
    
       // -------------------------v
       var colCount = table.rows[ num ].cells.length;
       for(var i=0; i<colCount; i++) {
    
            var newcell = row.insertCell(i);
    
            //-------------------------------v
            newcell.innerHTML = table.rows[ num ].cells[i].innerHTML;
            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;
            }
        }
    }