javascript - 单击 Button 不会向下钻取 Table Bootstrap 4 和 JS 和 JQuery 中的元素

Question

我有一个列表，其中包含已分配状态的元素(5 + 1 显示所有元素)，状态在特定列中，对于每个状态，我在列表上方都有一个按钮。

现在我想单击每个按钮之一以向下钻取列表，以便仅显示具有我单击该按钮状态的元素。我有 5 个按钮用于每个状态 1 个按钮，加上 1 个称为总计的按钮，它应该再次显示所有数据。

我使用 Bootstrap 4 和 Javascript，但无法真正绕过 JS。

下面是我的代码片段。

$(document).ready(function() {
  resStatusList();
  $(".searchGo").click(function() {
    var searchVal = $('#searchTotal').val();
    if (searchVal == "") {
      $('#searchroleName').addClass("alert");
    } else {
      $('#searchroleName').removeClass("alert");
    }
  });

  var $rows = $('#resListTable tr');
  $('#searchroleName').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    $rows.show().filter(function() {
      var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
      return !~text.indexOf(val);
    }).hide();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="addRoleDiv">
  <h4>Reservation List</h4>
  <label>click on a button to drill down items</label><br>
  <button class="btn searchGo btn-active" id="searchTotal">Total</button>
  <button class="btn searchGo btn-success" id="searchExpected">Expected</button>
  <button class="btn searchGo btn-danger" id="searchCancelled">Cancelled</button>
  <button class="btn searchGo btn-warning" id="searchPartial">Partial</button>
  <button class="btn searchGo btn-info" id="searchInhouse">Inhouse</button>
  <button class="btn searchGo btn-active" id="searchFinished">Finished</button>
</div>

<div class="col-lg-12 col-md-12 col-xs-12 padding table-responsive">
  
  <table class="table table-hover table-bordered" id="reservationListCheckIn">
    <thead class="reservationTableHead">
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody id="resListTable">
    <tr>
    <td>864</td>
    <td>Helen Fields</td>
    <td>Expected</td>
    </tr>
    <tr>
    <td>2435</td>
    <td>Frank White</td>
    <td>Cancelled</td>
    </tr>
    <tr>
    <td>2343</td>
    <td>Hugo Egon</td>
    <td>Inhouse</td>
    </tr>
    <tr>
    <td>245</td>
    <td>Marc Jacobs</td>
    <td>Partial</td>
    </tr>
    <tr>
    <td>43</td>
    <td>Julia Kline</td>
    <td>Finished</td>
    </tr>
    </tbody>
  </table>
  
</div>

Answer 1

在 .searchGo 上单击您需要获取当前按钮文本。如果它不是“总计”，您可以隐藏所有行并仅显示最后一列中具有预期值的行:

$('#reservationListCheckIn tbody tr').hide();
$('#reservationListCheckIn tbody tr td:nth-of-type(3)').filter(function(idx, ele) {
    return ele.textContent == titleBtnClicked;
}).closest('tr').show();

详情可以看:

• > :nth-of-type() Selector :选择所有元素，这些元素是其父元素相对于具有相同元素名称的兄弟元素的第 n 个子元素。
• > .filter( function ) : 将匹配元素集合减少为匹配选择器或通过函数测试的元素。

片段:

$(document).ready(function() {
    $(".searchGo").on('click', function(e) {

        // get current button text
        var titleBtnClicked = $(this).text();

        // if not Total
        if (titleBtnClicked != 'Total') {

            // hide all rows
            $('#reservationListCheckIn tbody tr').hide();

            // show only rows having in the 3th cell the correct value
            $('#reservationListCheckIn tbody tr td:nth-of-type(3)').filter(function(idx, ele) {
                return ele.textContent == titleBtnClicked;
            }).closest('tr').show();
        } else {
            $('#reservationListCheckIn tbody tr').show();
        }
    });

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://rawgit.com/HubSpot/tether/master/dist/css/tether.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<div class="addRoleDiv">
    <h4>Reservation List</h4>
    <label>click on a button to drill down items</label><br>
    <button class="btn searchGo btn-active" id="searchTotal">Total</button>
    <button class="btn searchGo btn-success" id="searchExpected">Expected</button>
    <button class="btn searchGo btn-danger" id="searchCancelled">Cancelled</button>
    <button class="btn searchGo btn-warning" id="searchPartial">Partial</button>
    <button class="btn searchGo btn-info" id="searchInhouse">Inhouse</button>
    <button class="btn searchGo btn-active" id="searchFinished">Finished</button>
</div>

<div class="col-lg-12 col-md-12 col-xs-12 padding table-responsive">

    <table id="reservationListCheckIn" class="table table-hover table-bordered">
        <thead class="reservationTableHead">
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Status</th>
        </tr>
        </thead>
        <tbody id="resListTable">
        <tr>
            <td>864</td>
            <td>Helen Fields</td>
            <td>Expected</td>
        </tr>
        <tr>
            <td>2435</td>
            <td>Frank White</td>
            <td>Cancelled</td>
        </tr>
        <tr>
            <td>2343</td>
            <td>Hugo Egon</td>
            <td>Inhouse</td>
        </tr>
        <tr>
            <td>245</td>
            <td>Marc Jacobs</td>
            <td>Partial</td>
        </tr>
        <tr>
            <td>43</td>
            <td>Julia Kline</td>
            <td>Finished</td>
        </tr>
        </tbody>
    </table>

</div>