Question

我正在尝试进行表过滤，因此我设法一次放置一个过滤器。我想知道是否有一种方法可以添加多个过滤器，例如使用a，b和c或仅使用a＆b等进行搜索。

这是我的代码

   <!DOCTYPE html>
    <html>
    <head>
        <title></title>
      <!-- Latest compiled and minified CSS -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <script>


    function searchRow(searchfilter) {
        var $rows = $('#table > tbody > tr').not(".header");
        var val2 = searchfilter.toLowerCase();
        val2 = (val2 === "all") ? "" : val2;

        $rows.show().filter(function () {
            var text2 = $(this).find('td:nth-child(2)').text().replace(/\s+/g, ' ').toLowerCase();
            return  !~text2.indexOf(val2);
        }).hide();
    }

    function searchTableDevice(device) {

        var searchfilter =  device;

        if (device == "") {
            searchfilter= '';
        }

        searchRow(searchfilter);
    }

      </script>


    </head>
    <body>


    <style type="text/css">
    .btn span.glyphicon {               
        opacity: 0;             
    }
    .btn.active span.glyphicon {                
        opacity: 1;             
    }
        #table {
            border-collapse: collapse;
            width: 100%;
            border: 1px solid #ddd;
            margin-top: 20px;
        }

        #table th,
        #table td {
            text-align: left;
            padding: 12px;
        }

        #table tr {
            border-bottom: 1px solid #ddd;
        }

        #table tr.header,
        #table tr:hover {
            background-color: #f1f1f1;
        }
    </style>

    <br/>

    <br/>


          <!-- All colors -->
       <div id="showAll">
       <button type="button" class="btn btn-info"
       autocomplete="off" onclick="searchTableDevice('all')">show all</button>

       <button type="button" class="btn btn-danger"
       autocomplete="off" onclick="searchTableDevice('Tablet')">Tablets</button>

       <button type="button" class="btn btn-default"
       autocomplete="off" onclick="searchTableDevice('Desktop')">In Progress</button>

        <button type="button" class="btn btn-warning"
       autocomplete="off" onclick="searchTableDevice('Mobile')">Closed</button>

      </div>





        <br/>

    <table id="table" class="table-striped table-hover">
        <tr class="header">
            <th style="width:35%;">Distribution</th>
            <th style="width:35%;">Supported devices</th>
            <th style="width:20%;">Download</th>
        </tr>
        <tr>
            <td>Glass '17</td>
            <td>Desktop & Mobile</td>
            <td><a href="#" class="btn btn-primary" target="_blank">Download</a></td>
        </tr>
        <tr>
            <td>Glass '17</td>
            <td>Tablet</td>
            <td><a href="#" class="btn btn-primary" target="_blank">Download</a></td>
        </tr>
        <tr>
            <td>Other distribution</td>
            <td>Mobile</td>
            <td><a href="#" class="btn btn-primary" target="_blank">Download</a></td>
        </tr>
        <tr>
            <td>Distribution 3</td>
            <td>Tablet & Mobile</td>
            <td><a href="#" class="btn btn-primary" target="_blank">Download</a></td>
        </tr>
    </table>
     Run code snippetHide results

    </body>
    </html>

我想知道如何添加一个数组列表，该数组将过滤表并根据我的选择隐藏其余的行。

我想更改按钮的样式，就像我希望按钮的样式像选中的“复选框”一样

谢谢

使用引导程序和jQuery对表进行多次过滤

0 个答案: