javascript - 如何通过单击相应行的按钮来删除表格行?

标签 javascript

这是我的代码:

    function deleteHostTable(src) {
        var table = src.parentNode.parentNode.parentNode;
        if(table.rows.length > 1) {             
            table.deleteRow(src.parentNode.parentNode);
        }
         }
    function addHost(src) {
         var table = src.parentNode.parentNode.parentNode;
        var newRow = table.insertRow(table.rows.length-1);

        var cell = newRow.insertCell(newRow.cells.length);

        cell.innerHTML = '<input type="hidden" name = "vtierIdH" value = "vtierId" />'

        cell = newRow.insertCell(newRow.cells.length);
        cell.innerHTML = '<img src="images/minus.gif" onclick="deleteHostTable(this);return false;"/>';

        cell = newRow.insertCell(newRow.cells.length);
        cell.className = "pagetitle";
        cell.innerHTML = '<input type = "text" value="hstst" />';
    }
</script>
<html>
<table id="host#1" index="1">
        <tr>
            <td colspan="10">
            <h2 align="left" class="pagetitle">Sub Account Hosts:</h2>
            </td>
        </tr>
        <tr>
            <input type="hidden" name="vtierIdH" value="<%=vtierId %>" />

            <td><button id="minus" onclick="deleteHostTable(this);"/></td>
            <td class="pagetitle"><input type="text" value="hstst" /></td>
        </tr>
        <tr>
            <td><button  onclick="addHost(this);"></td>
        </tr>
    </table>
</html>

现在,当我单击与按钮对应的按钮时,此代码将删除最上面的行 而不是与单击的按钮对应的行。如何删除该行中按钮对应的行?

最佳答案

只需将删除功能更改为

function deleteHostTable(src) {
    var row = src.parentNode.parentNode;
    row.parentNode.removeChild(row);
}

它不能与 deleteRow 一起使用的原因是它希望在您传递对象时传递行的索引。

关于javascript - 如何通过单击相应行的按钮来删除表格行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9018661/

相关文章:

javascript - 如何使用 Angular 2 在 POST 上启用 ASP.NET MVC 4 中的跨源请求

javascript - $ ('#foo' ).remove() 可能存在 jQuery 内存问题?

javascript - 创建包含字符串的单个字符的数组。这些正则表达式是如何工作的?

javascript - Reactjs - 创建单独的模块

javascript - 正确使用 async 和 wait

javascript - 始终在 jQuery 自动完成中显示特定选择,即使它与输入不匹配

javascript - 组件 DOM 更改时的 Vue 通知

javascript - 关于 'the angular way' 的不安全感

javascript - 我有一个 php 文件,在里面的代码中有一个错误,我不知道如何修复它?以及在哪里添加其余代码

javascript - JS - 未处理的 promise