使用jQuery从表中删除Row

Question

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

 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

您需要在函数中指定一个参数，然后需要获取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 3

你在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 4

你不能在你的函数中使用$(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 5

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

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

Answer 6

• 通过最近更改父级。 父母是直接的父母，最接近的是父母。
• 这在功能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();
        }