Question

假设我有一个这样的表

id  name    address     action
--------------------------------------
s1  n1  a1      delete
s2  n2  a2      delete

删除是一个例如<a href="http://localhost/student/delete/1">的链接。在实际案例中，我使用ajax删除学生。为了简化代码，我只是提醒链接并省略ajax脚本。我只想知道如何使用jquery从html文档中删除行。

$(document).ready(function() {
$("a").click(function(event) {
    alert("As you can see, the link no longer took you to jquery.com");
        var href = $(this).attr('href');
        alert(href);
        event.preventDefault();
   });
);

我想，在我提醒链接后，所选行将自动删除。有没有建议如何实施这个？

Answer 1

您无需调用preventDefault（）。简单地从事件处理程序返回false具有相同的效果。

要删除<a>链接所在的行，您可以调用$（this）.closest（“tr”）。remove（）：

$(document).ready(function() {
$("a").click(function(event) {
    alert("As you can see, the link no longer took you to jquery.com");
    var href = $(this).attr('href');
    alert(href);
    $(this).closest("tr").remove(); // remove row
    return false; // prevents default behavior
   });
);

Answer 2

为名为<tr>的每个row_9714添加一个ID，并在该链接中添加一个ID 9714。然后在你的点击事件处理程序调用中：

var thisId = $(this).attr('id');
$("#row_" + thisId).remove();

注意 - 9714只是一个虚拟ID。只需在每行使用一个唯一的数字。

Answer 3

此示例使用JQuery从表中删除行。

＆＃13;

$(document).ready(function () {
$("#my_table .remove_row").click(function () {
	$(this).parents("tr:first")[0].remove();
});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table"  border="1" id="my_table">
   <tbody>
      <tr>
         <td>1</td>
         <td>1</td>
         <td>1</td>
         <td><button type="button" class="remove_row">X</button></td>
      </tr>
      <tr>
         <td>2</td>
         <td>2</td>
         <td>2</td>
         <td><button type="button" class="remove_row">X</button></td>
      </tr>
   </tbody>
</table>

＆＃13;

使用jQuery删除行表

3 个答案: