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很重要，因为它提供了对单击按钮的引用，因此我们可以找到它所在的行。

Answer 2

检查此代码。它已经过验证，可以完美地完成您的工作。:)

<script>

function delete_row(me) {     
alert(me.parentNode.parentNode.id);
}
</script>

<table id="items_table">
    <tr id="row_1">
        <td>
            <input type="text" value="item1"/>
        </td>
        <td>
            <button onclick="delete_row(this);">X</button>
        </td>
    </tr>

    <tr id="row_5">
        <td>
            <input type="text" value="item5"/>
        </td>
        <td>
            <button onclick="delete_row(this);">X</button>
        </td>
    </tr>
</table>

Answer 3

你不能在每一行中分别更改<button onclick="delete_row();">X</button>为, 吗？<button onclick="delete_row('row_5');">X</button>

您的处理程序看起来像：

function delete_row(theID) {     
        alert(theID);
}