Question

I wonder whether someone could help me please,

From a tutorial I found online which I’ve been able to adapt, I’ve put together the code below, which allows the user to dynamically add additional rows into a table following the insertion of data in the row above.

The problem I’m having is that I can only insert one more row, giving a total of two and I just can’t find out why. I’ve been back to the original here to see check that my coding is the same and except for the changes in the field name, table name and the exclusion of the ‘Add’ button I can’t see any differences to cause this problem.

I just wondered whether someone could perhaps take a look at my code please and let me know where I’m going wrong.

Javascript

<script type="text/javascript" language="javascript">
function addRow()
{
    //add a row to the rows collection and get a reference to the newly added row
    var newRow = document.all("addimage").insertRow();

    var oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='radio' name='select'>";

    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='title'>";

    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='file' name='image'>";   
}

//deletes the specified row from the table
function removeRow(src)
{
    /* src refers to the input button that was clicked. 
       to get a reference to the containing <tr> element,
       get the parent of the parent (in this case <tr>)
    */   
    var oRow = src.parentElement.parentElement;  

    //once the row reference is obtained, delete it passing in its rowIndex   
    document.all("addimage").deleteRow(oRow.rowIndex);  

}
</script>

Table Layout

<table id="addimage" style="table-layout:auto">
   <tr>
      <td width="20"><input name="select" type="radio" id="select"/></td>
      <td width="144"><input name="title" type="text" id="title"/></td>
      <td width="304"><input name="image" type="file" id="image" onchange="addRow();"/></td>
   </tr>
</table>

Answer 1

The new row that you are adding do not have the onchange property set, it should be:

oCell.innerHTML = "<input type='text' name='image' onchange='addRow();'>";   

Also, document.all(“addimage”) is (as far as i know) bad practice because it is not supported by all browsers. For compatibility you should also add index to insert the row in (-1 for last) and the index for the new cells. The parameter is required in Firefox and Opera, but optional in Internet Explorer, Chrome and Safari. I suggest that you change your code to something like the following:

function addRow()
{
    //add a row to the rows collection and get a reference to the newly added row
    var newRow = document.getElementById("addimage").insertRow(-1);

    var oCell = newRow.insertCell(0);
    oCell.innerHTML = "<input type='radio' name='select'>";

    oCell = newRow.insertCell(1);
    oCell.innerHTML = "<input type='text' name='title'>";

    oCell = newRow.insertCell(2);
    oCell.innerHTML = "<input type='text' name='image' onchange='addRow();'>";   
}