Question

I have read many articles so far and tried so many different ways to add rows dynamically to my HTML table, but nothing is working. When I click the add button [ + ], it’s not adding a row. For some reason looks like it’s not letting me add cells too, when I am do: newCell = newRow.insertCell(). My newRow variable can’t find the insertCell() method.

This is my table:

<table ID="newDataTable" runat="server" width="400">
<tr runat="server"> 
    <td runat="server" nowrap="nowrap" bordercolor="#FFFFFF" width= "50">
        <label style="font-size:smaller"> CITY: </label>
    </td>
    <td runat="server" nowrap="nowrap" bordercolor="#FFFFFF" width= "80">
        <input id= "City_box" type="text" name="tb_CITY"/>
    </td>
    <td runat="server" nowrap="nowrap" bordercolor="#FFFFFF" width= "75">
        <label style="font-size:smaller"> &nbsp;&nbsp;&nbsp;STATE: </label>
    </td>
    <td runat="server" nowrap="nowrap" bordercolor="#FFFFFF" width= "90">
        <input id= "State_box" type="text" name="tb_STATE"/>
    </td>
    <td runat="server" align="left" bordercolor="#FFFFFF" width= "10">
        <input title="Add Row" id="addButton" type="button" value=" + " onclick="addRow()" />
    </td> 
    <td runat="server" align="left" bordercolor="#FFFFFF" width= "10">
        <input title="Remove Row" id="deleteButton" type="button" value=" - " onclick="removeRow(this)" />
    </td> 
</tr>
</table>

And here is the Javascript I am using:

<script type="text/javascript">
//add a new row to the table
function addRow() 
{
    //add a row to the rows collection and get a reference to the newly added row
    var newRow = document.getElementById('newDataTable').insertRow(-1);

    //add 3 cells (<td>) to the new row and set the innerHTML to contain text boxes

    var newCell = newRow.insertCell();
    newCell.innerHTML = "<label style='font-size:smaller'> CITY: </label>";

    newCell = newRow.insertCell();
    newCell.innerHTML = "<input type='text' name='tb_CITY'/>";

    newCell = newRow.insertCell();
    newCell.innerHTML = "<label style='font-size:smaller'> &nbsp;&nbsp;&nbsp;STATE: </label>";

    newCell = newRow.insertCell();
    newCell.innerHTML = "<input type='text' name='tb_STATE'/>";

    newCell = newRow.insertCell();
    newCell.innerHTML = "<input title='Add Row' name='addButton' type='button' value=' + ' onclick='addRow()' />";

    newCell = newRow.insertCell();
    newCell.innerHTML = "<input title='Remove Row' name='deleteButton' type='button' value=' - ' onclick='removeRow(this)' />";
}

//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("newDataTable").deleteRow(oRow.rowIndex);
}    
</script>

Answer 1

The problem is that you can’t have both a src attribute and code in a <script> element (OP edited this in the question, so this refers to the previous code that wasn’t working).

Change:

<script type="text/javascript" src="script/FloatLayer.js">

To:

<script type="text/javascript">

Or, move addRow() and removeRow() to FloatLayer.js. Here’s a demo where at least the add button is working with no code change.

Demo: http://jsfiddle.net/ThinkingStiff/9aDpf/

I changed insertCell() to insertCell( -1 ) to put the elements in the right order, which is probably what you wanted.

Also, as Jonathan M mentioned, to get it to work in all browsers, change:

insertRow()

To:

insertRow( -1 )

One final note: You can use tr.cloneNode( true ) to achieve the same results with much less code.