代码之家 › 专栏 › 技术社区 › Caverman

jQuery是否删除除所选行以外的所有表行?

jquery javascript

-1

Caverman · 技术社区 · 8 年前

我试图找到使用jQuery删除除所选行之外的所有行的最佳方法。我做了一些搜索,看到了一些关于删除所有记录或除第一行或最后一行以外的所有记录的帖子,但除了选中的一行之外,没有任何关于删除所有记录的帖子。

该场景将搜索员工列表,其中可能会返回5条记录。然后会有一个“选择”按钮,当你点击该按钮时,它会删除所有 <tbody> 除此之外的其他行。实际上,我的想法是,不仅要删除行,还要隐藏“选择”按钮并显示一个文本框,同时在表格下方显示一个“添加”按钮,以添加在文本框中输入项目的员工。

我曾考虑在每一行上放置一个隐藏字段,其中包含一行#,将该行索引传递给jQuery函数,然后循环遍历所有Tbody。Tr和remove,如果它与传入的行索引不匹配?

另一个想法是 Onclick 在每个“Select”(选择)按钮上,然后在函数中使用“this”(此)来引用行,但我不知道如何有效地说 "remove all but $this row" 。

<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>
        @foreach (var item in Model.listEmployee)
        {
            <tr>
                <td>@item.FirstName</td>
                <td>@item.LastName</td>
                <td>@item.EmployeeId</td>
                <td>@item.PositionTitle</td>
                <td>
                    <button id="btnSelect" class="btn btn-sm">Select</button>
                    <input id="txtCaseNo" type="text" style="display:none;" />
                </td>
            </tr>
        }
    </tbody>
</table>

2 回复 | 直到 8 年前

epascarello 8 年前

第一个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>

laaksom 8 年前

为什么不在你的模型上过滤呢。是否在所选行的id上列出员工?这是假设您当前的设置是被动的。

Ie:

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