如何使用DOM更改HTML表第一行中的按钮?(添加和删除行DOM)

How to change the button in the first row of a HTML table using DOM ? (Adding and removing rows by DOM)

本文关键字：DOM 按钮 删除行 添加 一行 更改 何使用 HTML      更新时间：2023-09-26

在下面的小提琴，我试图添加和删除表行使用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>

通过克隆现有行(和现有按钮)创建新行。如果您希望第一行中的按钮的行为与其他行不同，则需要在insRow函数中重写已更改的行为(就像您目前对输入id所做的那样)。

试着把你的代码改成:

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

我猜你的表将动态生成，这就是为什么你有这个问题。

一个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"等增量id

相关文章：