使用jQuery从表中删除Row

Question

我想生成一个包含数组内容的表，并带有删除行的选项。我得到了一个基本的代码块，我认为它应该可以工作，但它没有做任何事情而且它给了我＆＃34; Uncaught SyntaxError：Unexpected token}＆＃34;错误。

＆＃13;

＆＃13;

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>");

  }
}

＆＃13;

#table1 {
  background: gray;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

this在TABLE方法中没有引用BUTTON / newtest2()，它引用 window 对象，因此代码没有工作。

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

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

＆＃13;

＆＃13;

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>");
  }
}

＆＃13;

#table1 {
  background: gray;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我建议你使用不显眼的事件处理程序使用.on()来附加事件处理程序，而不是丑陋的内联事件处理程序。

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

＆＃13;

＆＃13;

$("#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>");

  }
})

＆＃13;

#table1 {
  background: gray;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

这是一个工作示例。请注意，点击事件和id s

可能有更好的方法

＆＃13;

＆＃13;

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>");

  }
}

＆＃13;

#table1 {
  background: gray;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

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

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

以下是摘录：

＆＃13;

＆＃13;

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>");

  }
}

＆＃13;

#table1 {
  background: gray;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

你不能在你的函数中使用$(this)因为它没有引用被点击的按钮。

由于您将函数包含在onclick中并将this作为参数传递，因此只需在函数内使用该参数，就像这样

辅助建议：使用.closest('tr')代替.parents('tr')，以防您知道将来可能需要在表格中使用表格，;）

＆＃13;

＆＃13;

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>");

  }
}

＆＃13;

#table1 {
  background: gray;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 5

要在点击按钮时删除一行：

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

Answer 6

• 更接近父母。父母是直接的父母，最亲近的是 穿越dom。
函数newttest2中的
• 此未引用该按钮 element，只需将其称为函数参数

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();
        }