Как изменить кнопку в первой строке таблицы HTML с помощью DOM?(Добавление и удаление строк по DOM)

Question

Здесь, в скрипте ниже, я пытаюсь добавлять и удалять строки таблицы, используя DOM.Согласно сценарию, в последнем поле каждой строки будет кнопка удаления.Но я хочу, чтобы кнопка удаления в первом поле была кнопкой добавления, которая находится вне таблицы.

Только кнопка в первом ряду должна быть кнопкой добавления строки.Остальная часть строки должна иметь кнопку удаления как есть.Как я могу это сделать ?

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

Вы создаете новые строки путем клонирования существующей строки (и существующей кнопки). Если вы хотите, чтобы поведение кнопки в первой строке отличалось от других строк, вам нужно переопределить это измененное поведение в функции insRow (как вы делаете для входных идентификаторов в настоящее время).

Попробуйте изменить код на:

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

Answer 2

Я могу предположить, что ваша таблица будет сгенерирована динамически, поэтому у вас возникла проблема.

Решение jQuery, как вы его отметили:

$(function(){
    $("#POITable tr").eq(1).find('td:last').html('<input type="button" id="addmorePOIbutton" value="Add More POIs" onclick="insRow()"/>');
});

Демонстрация: http://jsfiddle.net/7AeDQ/59/

Также ваша кнопка удаления будет появляться несколько раз, поэтому не используйте для нее фиксированный id, как вы использовали:

<input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)"/>

Скорее используйте class или используйте инкрементный идентификатор, например id="delPOIbutton-1", id="delPOIbutton-2"