Question

I have Javascript like the following:

function addRow(table1) {

            var table = document.getElementById(table1);

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

And HTML like the following:

<input type="button" value="Insert row" onclick="addRow('table1')" />
<table id="table1" border=1>
    <tr>
        <td rowspan=2><input type="text" name="txt1"></td>
        <td><input type="text" name="txt2"></td>
    </tr>
    <tr>
        <td><input type="text" name="txt3"></td>
    </tr>
</table>

I have a row with rowspan=2, and two rows with no rowspan. How do I write the following line so that once the user clicks the Insert Row button, three textboxes will be added into the new row?

newcell.innerHTML = table.rows[0].cells.innerHTML;

Answer 1

Note that in your code you have:

> newcell.innerHTML = table.rows[0].cells.innerHTML;

I think you mean:

newcell.innerHTML = table.rows[0].cells[i].innerHTML;

But anyway, have you considered using a cloned row instead? e.g. something like the following (untested):

function addRow(tableID) {
  var table = document.getElementById(tableID);
  var row = table.rows[0].cloneNode(true);
  var inputs = row.getElementsByTagName('input');
  var i = inputs.length;

  while (i--) {

    if (inputs[i].type = 'text') {
      inputs[i].vaule = '';

      // Might want to change other properties too
    }
  }
  table.tBodies[0].appendChild(row);
}