點擊按鈕不會深入表中的項目引導4和JS和JQuery

Question

我有一個列表中的項目他們有一個狀態分配（5 + 1顯示所有項目），狀態是在一個特定的列，並且對於每個狀態，我在列表上方都有一個按鈕。

現在，我想單擊每個按鈕之一來向下鑽取列表，以便僅顯示具有點擊該按鈕的狀態的項目。每個狀態1按鈕有5個按鈕，再加上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>