Question

Here in the below fiddle, i am trying to add and remove table rows using DOM. As per the script the last field of every row will have a delete button. But i want the delete button in the first field to be the add button which is outside the table.

Only the button in the first row should be add row button. rest of the row should have delete button as it is. How can i do this ?

jsfiddle – http://jsfiddle.net/7AeDQ/33/

Javascript

function deleteRow(row)
{
    var i=row.parentNode.parentNode.rowIndex;
    document.getElementById('POITable').deleteRow(i);
}


function insRow()
{
    console.log( 'hi');
    var x=document.getElementById('POITable');
    var new_row = x.rows[1].cloneNode(true);
    var len = x.rows.length;
    new_row.cells[0].innerHTML = len;

    var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
    inp1.id += len;
    inp1.value = '';
    var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
    inp2.id += len;
    inp2.value = '';
    x.appendChild( new_row );
} 

HTML

<div id="POItablediv">
            <input type="button" id="addmorePOIbutton" value="Add More POIs" onclick="insRow()"/>
    <table id="POITable" border="1">
        <tr>
            <td>POI</td>
            <td>Latitude</td>
            <td>Longitude</td>
            <td>Delete?</td>

        </tr>
        <tr>
            <td>1</td>
            <td><input size=25 type="text" id="latbox"/></td>
            <td><input size=25 type="text" id="lngbox" readonly=true/></td>
            <td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)"/></td>

        </tr>
    </table>

Answer 1

You create new rows by cloning an existing row (and existing button). If you want the behaviour of the button in the first row to be different from other rows, you need to override that changed behaviour in your insRow function (as you do for input ids currently).

Try changing your code to:

HTML:

...
<tr>
    <td>1</td>
    <td><input size=25 type="text" id="latbox"/></td>
    <td><input size=25 type="text" id="lngbox" readonly=true/></td>
    <td><input type="button" id="delPOIbutton" value="Add More POIs" onclick="insRow()"/></td>
</tr>
...

JS:

function deleteRow(evt) {
    var i = evt.target.parentNode.parentNode.rowIndex;
    document.getElementById('POITable').deleteRow(i);
}


function insRow() {
    var x = document.getElementById('POITable');
    var new_row = x.rows[1].cloneNode(true);
    var len = x.rows.length;

    new_row.cells[0].innerHTML = len;

    var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
    inp1.id += len;
    inp1.value = '';

    var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
    inp2.id += len;
    inp2.value = '';

    var button = new_row.cells[3].getElementsByTagName('input')[0];
    button.value = "Delete row";
    button.onclick = function(it) {deleteRow(it)};

    x.appendChild( new_row );    
}