Question

我正在尝试使用jQuery来删除除了所选行之外的所有行的最佳方法。我已经做了一些搜索，我看过几篇关于删除除第一行或最后一行之外的所有记录或所有记录的帖子，但没有删除除了所选记录之外的所有记录。

该方案将搜索可能返回5条记录的员工列表。然后会出现一个“选择”按钮，当您单击该按钮时，它将删除除该行之外的所有<tbody>行。实际上，我的想法是不仅删除行，而且隐藏“选择”按钮并显示文本框以及在表格下方显示“添加”按钮，以便为员工添加在文本框中输入的项目。

我已经考虑过在每行有一个行＃上放一个隐藏字段，将该行索引传递给jQuery函数然后循环遍历所有Tbody.Tr并删除它与行索引不匹配传入？

另一种想法是在每个“选择”按钮上放置一个Onclick，然后在函数中使用“this”来引用该行，但后来我不知道如何有效地说{ {1}}。

"remove all but $this row"

Answer 1

第一个ID必须是单数的，因此id="btnSelect"不起作用。使它成为一个类或名称。

因此，选择TR并选择兄弟姐妹，然后将其删除。

$("tbody").on("click", "button", function() {  //bind the click to the buttons
  var button = $(this) //get what was clicked
  $(this).closest("tr") //select the TR
    .siblings() //get the other TRS
    .remove() // um, remove them
  button.hide()  //hide your button
  button.siblings().removeAttr('hidden')  //show the input
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table table-hover table-striped table-bordered table-sm">
  <thead class="thead-light">
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Employee ID</th>
      <th>Position Title</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A@item.FirstName</td>
      <td>@item.LastName</td>
      <td>@item.EmployeeId</td>
      <td>@item.PositionTitle</td>
      <td>
        <button class="btnSelect btn btn-sm">Select</button>
        <input name="txtCaseNo" type="text" hidden />
      </td>
    </tr>
    <tr>
      <td>B@item.FirstName</td>
      <td>@item.LastName</td>
      <td>@item.EmployeeId</td>
      <td>@item.PositionTitle</td>
      <td>
        <button class="btnSelect btn btn-sm">Select</button>
        <input name="txtCaseNo" type="text" hidden />
      </td>
    </tr>
    <tr>
      <td>C@item.FirstName</td>
      <td>@item.LastName</td>
      <td>@item.EmployeeId</td>
      <td>@item.PositionTitle</td>
      <td>
        <button class="btnSelect btn btn-sm">Select</button>
        <input name="txtCaseNo" type="text" hidden />
      </td>
    </tr>
    <tr>
      <td>D@item.FirstName</td>
      <td>@item.LastName</td>
      <td>@item.EmployeeId</td>
      <td>@item.PositionTitle</td>
      <td>
        <button class="btnSelect btn btn-sm">Select</button>
        <input name="txtCaseNo" type="text" hidden />
      </td>
    </tr>    
  </tbody>
</table>

Answer 2

为什么不在所选行的id上过滤Model.listEmployee？这假设您当前的设置是被动的。

即：

const new_list = old_list.filter(item => item.id !== selected_id)

jQuery删除除选定表之外的所有表行？

2 个答案: