Question

我想构建一个Bootstrap工具栏，该工具栏可以在选择字母时过滤值表（仅Last Name列）：

代码：

$(document).ready(function () {

        (function ($) {

      $('#lettersToolbar').on('click', function () {

        // displays all letters, not chosen one
        var letter = $(this).text();

        // tr's second td within body w/ class 'searchable'
        var rows = $('.searchable tr');

        // hide the rows
        rows.hide();

        // show rows that match
        rows.filter(function() {

          //locate Last Name td
          td = $(this).getElementsByTagName("td")[1];

          // match first character of text to letter
          return td.innerHTML.toUpperCase().indexOf(filter) == 0;

        });

      })

    }(jQuery));

});

我很难：

标识所选按钮-letter包含ALL，D，M和S
标识Last Name列

提琴：https://jsfiddle.net/craibuc/q8b2ug5z/

我想念什么？

Answer 1

通过点击按钮组中的second column of table，尝试在button中搜索以下代码段。

$(document).ready(function () {

    $(".btn-group > button.btn").on("click", function(){
       var letter =  $(this).text();        
	$(".searchable tr td:nth-child(2)").each(function () {
            $(this).parent().show();            
            if(!$(this).text().toUpperCase().indexOf(letter) == 0  && letter !== 'ALL'){
                $(this).parent().hide();
            }
       });      
   });
    
});

.btn-group > .btn:focus{
    background: #eee;
    outline: none!important;
    box-shadow:none;
    border: 1px solid #ddd;
  }

<html>
<head>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  
</head>

<body>


<div class="btn-toolbar" role="toolbar" id="lettersToolbar">
    <div class="btn-group mr-2">
        <button class="btn btn-default" id="ALL">ALL</button>
        <button class="btn btn-default" id="D">D</button>
        <button class="btn btn-default" id="M">M</button>
        <button class="btn btn-default" id="S">S</button>
    </div>
</div>

<table class="table table-striped">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody class="searchable">
      <tr>
        <td>Jane</td>
        <td>Doe</td>
      </tr>
      <tr>
        <td>Mickey</td>
        <td>Mouse</td>
      </tr>
      <tr>
        <td>Homer</td>
        <td>Simpson</td>
      </tr>
    </tbody>
</table>

</body>
</html>

使用Bootstrap工具栏按钮按列过滤HTML表格

1 个答案: