javascript - 删除表中的特定行

Question

我正在尝试使用 JavaScript 从表中删除特定行。我现在尝试执行此操作的方法是通过单击按钮(删除按钮)检索当前行的 ID，然后删除该行。问题是我没有检索表中的当前行 ID。如果有人可以帮助我在用户单击删除按钮时检索当前行的 ID，我想我可以自己解决剩下的问题。谢谢

/*The Javascript*/
function delete_row() {     
        alert('id goes here');
        //getElementById('row').innerHTML ='hello';
        //id.deleteRow();
        //var table = document.getElementByTagName('items_table');
        //var row = table.rows[index];
                //document.getElementByTagName('items_table').deleteRow(0);
}

<小时/>

/*The HTML of the Table*/
<table id="items_table">
    <tr id="row_1">
        <td>
            <input type="text" value="item1"/>
        </td>
        <td>
            <button onclick="delete_row();">X</button>
        </td>
    </tr>
/*   Five rows in this table...  */
    <tr id="row_5">
        <td>
            <input type="text" value="item5"/>
        </td>
        <td>
            <button onclick="delete_row();">X</button>
        </td>
    </tr>
</table>

Answer 1

您可以沿着树向上爬，直到找到一行:

function delete_row(btn) {
    var tr = btn;
    while(tr && tr.nodeName != "TR") tr = tr.parentNode;
    if( !tr) throw new Error("Failed to find the row, was the function called correctly?");
    tr.parentNode.removeChild(tr); // delete it
}

还有:

<button onClick="delete_row(this);">X</button>

this 很重要，因为它提供了对所单击按钮的引用，因此我们可以找到它所在的行。