Dynamically Adding Table Row

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();'>";   
}

Answer 2

Seen the actual code. In that there is a button, when clicked, adds row to the table. In your case you are using onchange event. Instead of that use onclick event, as I mentioned in the comment.

Secondly, if you add onclick on every image, you will end up adding extra row on any image click. I hope it's okay for you.

Suggestion

Instead of using onclick on image use anchor tag which contains your image or use single button as shown in the demo. It will look something like this

<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">
      <a href='#' onclick='addRow();'>
        <input name="image" type="file" id="image"/>
      </a>
   </td>
 </tr>
</table>

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 = "<a href='#' onclick='addRow();><input type='file' name='image'>'</a>";   
}

If you want to disable the anchor tag after row is added you can disable it using javascript. Hope this works.