javascript - 在 Javascript 中单击按钮删除表格行

标签 javascript html html-table delete-row

我有一个包含以下 3 列的表格,其中每一行都是动态附加的。

  • Condition : 是一个单纯的 WHERE 子句条件语句字符串
  • 删除:删除该行的按钮(删除条件)
  • 加入:下拉组合

当用户点击删除按钮时,需要删除该特定行。

我已经为此编写了代码,但没有任何反应,也没有在控制台上收到任何错误。

form

上下文中的代码

$("#whereConditionTable").append(
        "<tr>"+
            "<td>"+conditionString+"</td>"+
            "<td><button id='removeConditionBtn' name='removeConditionBtn' class='btn btn-default'><img src='resources/images/removeWhereCondition.png' width='25px' height='25px'></button>"+
            "<td>"+
                "<select id='where-Condition-Join-Combo' name='where-Condition-Join-Combo' class='form-control'>"+
                  "<option value='1'>Join using</option>"+
                  "<option value='2'>AND</option>"+
                  "<option value='3'>OR</option>"+
                "</select>"+
              "</td>"+
        "</tr>"
   );

    document.getElementById("removeConditionBtn").addEventListener("click", function() {
    removeWhereCondition();
}, false);

removeWhereCondition()

function removeWhereCondition()
{
    $(this).closest("tr").remove();
}

在这方面的任何建议将不胜感激。

最佳答案

function deleteRow(r) {
    var i = r.parentNode.parentNode.rowIndex;
    document.getElementById("myTable").deleteRow(i);
}
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table id="myTable">

<tr>
  <td>Row 1</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
<tr>
  <td>Row 2</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
<tr>
  <td>Row 3</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
</table>
</body>
</html>

关于javascript - 在 Javascript 中单击按钮删除表格行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46324585/

相关文章:

javascript - 链接同一页面上的另一个 html (javascript)

php 时间戳转 javascript 时间或日期

html - TD :before and vertical-align:middle

JavaScript 正则表达式 - 正面前瞻 - 给我语法错误

javascript - 再次运行正则表达式搜索并替换 javascript

html 导航菜单下拉菜单只显示最后一个菜单项

jquery - 悬停时突出显示 div 并仅使用 css3 淡出其他 div

PHP 在前端显示时更改字段值

angular - 是否可以使用 PrimeNG DataTable 添加自定义过滤器功能?

php - 在 html 表中显示 SQL 表数据不起作用