使用 jQuery 从表中删除行

Question

我想生成一个包含数组内容的表，并带有删除行的选项。我得到了一个基本的代码块，我认为它应该可以工作，但它没有做任何事情，它给了我"未捕获的语法错误：意外的令牌}"错误。

function newtest2() {
  $(this).parents('tr').remove();
}
function newtest() {
  var name = ["Avengers", "Black Mirror", "Star Wars"];
  var r = name.length;
  $("#table1").empty();
  for (var i = 0; i < r; i += 1) {
    $("#table1").append("<tr><td>" + name[i] + "</td><td>" + "<button onclick='newtest2(this)'>Remove</button>" + "</td></tr>");
  }
}

#table1 {
  background: gray;
}
td {
  border: 1px solid black;
  text-align: center;
  color: white;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table1">
</table>
<br>
<button onclick="newtest()">TEST</button>

Answer 1

> this 在 newtest2() 方法中不引用 TABLE/BUTTON，它引用窗口对象，因此代码不起作用。

在函数中接受 this 参数并使用它

function newtest2(elem) {
   $(elem).closest('tr').remove();
}

function newtest2(elem) {
  $(elem).closest('tr').remove();
}
function newtest() {
  var name = ["Avengers", "Black Mirror", "Star Wars"];
  var r = name.length;
  $("#table1").empty();
  for (var i = 0; i < r; i += 1) {
    $("#table1").append("<tr><td>" + name[i] + "</td><td>" + "<button onclick='newtest2(this)'>Remove</button>" + "</td></tr>");
  }
}

#table1 {
  background: gray;
}
td {
  border: 1px solid black;
  text-align: center;
  color: white;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table1">
</table>
<br>
<button onclick="newtest()">TEST</button>

---

我建议您使用不显眼的事件处理程序使用.on()将事件处理程序与元素而不是丑陋的内联事件处理程序附加到元素。

使用.on()方法和事件委派方法附加动态元素的事件处理程序(删除按钮(。

$("#table1").on('click', '.remove', function() {
  $(this).closest('tr').remove();
})
$("#create").on('click', function() {
  var name = ["Avengers", "Black Mirror", "Star Wars"];
  var r = name.length;
  $("#table1").empty();
  for (var i = 0; i < r; i += 1) {
    $("#table1").append("<tr><td>" + name[i] + "</td><td>" + "<button class='remove' type='button'>Remove</button>" + "</td></tr>");
  }
})

#table1 {
  background: gray;
}
td {
  border: 1px solid black;
  text-align: center;
  color: white;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table1">
</table>
<br>
<button id="create">TEST</button>

Answer 2

要在单击按钮时删除行：

$('#table_id').on('click', '#remButton', function(){
    var indexRow = this.parentNode.parentNode.rowIndex;
    document.getElementById("table_ID").deleteRow(indexRow);
});

Answer 3

您需要

在函数中指定一个参数，然后您需要获取this元素的父元素的父级，因为它是一个按钮，而不是<td>。

这是一个工作示例。请注意，对于点击事件和id，可能有更好的方法来执行此操作

function newtest2(evt) {
  $(evt).parent().parent().remove();
}
function newtest() {
  var name = ["Avengers", "Black Mirror", "Star Wars"];
  var r = name.length;
  $("#table1").empty();
  for (var i = 0; i < r; i += 1) {
    $("#table1").append("<tr><td>" + name[i] + "</td><td>" + "<button onclick='newtest2(this)'>Remove</button>" + "</td></tr>");
  }
}

#table1 {
  background: gray;
}
td {
  border: 1px solid black;
  text-align: center;
  color: white;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table1">
</table>
<br>
<button onclick="newtest()">TEST</button>

Answer 4

您正在传递 HTML 上的this - newtest2(this) .

在你的函数上，你需要接收变量并使用它来删除<tr>

 function newtest2(e) {              //Add e as parameter
      $(e).parents('tr').remove();   //Use the e to delete
 }

这是片段：

function newtest2(e) {
  $(e).parents('tr').remove();
}
function newtest() {
  var name = ["Avengers", "Black Mirror", "Star Wars"];
  var r = name.length;
  $("#table1").empty();
  for (var i = 0; i < r; i += 1) {
    $("#table1").append("<tr><td>" + name[i] + "</td><td>" + "<button onclick='newtest2(this)'>Remove</button>" + "</td></tr>");
  }
}

#table1 {
  background: gray;
}
td {
  border: 1px solid black;
  text-align: center;
  color: white;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table1">
</table>
<br>
<button onclick="newtest()">TEST</button>

Answer 5

您不能在函数中使用$(this)，因为它不引用正在单击的按钮。

由于您将函数包含在onclick中并将this作为参数传递，因此只需在函数中使用该参数，如下所示

次要建议：使用 .closest('tr'( 而不是 .parents('tr'(，以防万一，你知道，将来你可能想要一个表中的表，;)

function newtest2(caller) {
  $(caller).closest('tr').remove();
}
function newtest() {
  var name = ["Avengers", "Black Mirror", "Star Wars"];
  var r = name.length;
  $("#table1").empty();
  for (var i = 0; i < r; i += 1) {
    $("#table1").append("<tr><td>" + name[i] + "</td><td>" + "<button onclick='newtest2(this)'>Remove</button>" + "</td></tr>");
  }
}

#table1 {
  background: gray;
}
td {
  border: 1px solid black;
  text-align: center;
  color: white;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table1">
</table>
<br>
<button onclick="newtest()">TEST</button>

Answer 6

• 按最接近的方式更改父级。父级是直接父级，最接近的是穿越 DOM。
• 这在函数 newttest2 中不是指按钮元素，只需将其称为函数参数即可

function newtest2(el) {
  $(el).closest('tr').remove();
}
function newtest() {
  var name = ["Avengers", "Black Mirror", "Star Wars"];
  var r = name.length;
  $("#table1").empty();
  for (var i = 0; i < r; i += 1) {
    $("#table1").append("<tr><td>" + name[i] + "</td><td>" + "<button onclick='newtest2(this)'>Remove</button>" + "</td></tr>");
  }
}

#table1 {
  background: gray;
}
td {
  border: 1px solid black;
  text-align: center;
  color: white;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table1">
</table>
<br>
<button onclick="newtest()">TEST</button>

Answer 7

试试这个

 for (var i = 0; i < name.length; i += 1) {
                        $("#table1").append("<tr id=" + name[i] + "><td>" + name[i] + "</td><td>" + "<button id=" + name[i] + " onclick='newtest2(this.id)'>Remove</button>" + "</td></tr>");
                    }

 function newtest2(id) {
            $('#' + id + '').remove();
        }