Question

这是指我之前的问题。

how to filter records based on key click?

但是现在我想尝试在div元素数组和表之间进行通信，那么如何根据div数组过滤记录。

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $(function() { // on page load
                $('#myElId').data('nameYourData', ["22","23","24"]); 
                var myData = $('#myElId').data('nameYourData');
                $("#showMyData").text(myData);
            });
        </script>
    </head>
    <body>
        <div id="myElId">Some element</div><br/>
        MyData:<div id="showMyData"></div>

        <a href="filter_records()">MyData:<div id="showMyData"></div></a> 

        <script> 
            $(function() {
                $('input[type="checkbox"]').change(function() {
                    // We check if one or more checkboxes are selected
                    // If one or more is selected, we perform filtering
                    if($('input[type="checkbox"]:checked').length > 0) {
                        // Get values all checked boxes
                        var vals = $('input[type="checkbox"]:checked').map(function() {
                            return this.value;
                        }).get();

                        // Here we do two things to table rows
                        // 1. We hide all
                        // 2. Then we filter, show those whose value in first <td> matches checkbox value
                        $('table tr')
                            .hide()    // 1
                            .filter(function() {    // 2
                                return vals.indexOf($(this).find('td:first').text()) > -1;
                            }).show();
                    } else {
                        // Show all
                        $('table tr').show();
                    }
                });
            });
        </script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <table border =1 cellspacing="1" cellpadding="1" style="width:100%">
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Marks</th>
            </tr>
            <tr>
                <td>22</td>
                <td>Smith</td>      
                <td>50</td>
            </tr>
            <tr>
                <td>23</td>
                <td>Jackson</td>        
                <td>94</td>
            </tr>
            <tr>
                <td>45</td>
                <td>Doe</td>        
                <td>80</td>
            </tr>
            <tr>
                <td>24</td>
                <td>Doe</td>        
                <td>80</td>
            </tr>
            <tr>
                <td>25</td>
                <td>Doe</td>        
                <td>80</td>
            </tr>
            <tr>
                <td>29</td>
                <td>Doe</td>        
                <td>80</td>
            </tr>
        </table>

        <input type="checkbox" name="vehicle" value="22"> 22<br>
        <input type="checkbox" name="vehicle" value="23"> 23 <br>
        <input type="checkbox" name="vehicle" value="24"> 24<br>
        <input type="checkbox" name="vehicle" value="25"> 25 <br>
        <input type="checkbox" name="vehicle" value="29"> 29<br>
        <input type="checkbox" name="vehicle" value="45"> 45 <br>
    </body>
</html>

但是如何通过单击文本（如href）来实现它，并且应该在函数中传递showdata变量，并且应该过滤行。

Answer 1

我稍微修改了你的代码。可能这个例子对你有帮助吗？粘贴到html文件中，看看它是否有效。

编辑：由于请求更改而修改的代码 Edit2：再次修改以将过滤器放入函数

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){   

                var filterList = [22,23,24];

                //-----Code to implement click listener---
                $('#showMyDataButton').click(function(){
                    if($(this).hasClass('clickableDivOff')){
                        //--------------------------
                        // Turn on Filter
                        //--------------------------

                        //change button effects
                        $(this).removeClass('clickableDivOff');
                        $(this).addClass('clickableDivOn');
                        $(this).text('Filter is on');

                        //applying filter
                        TurnOnFilter(filterList);
                    } else {
                        //--------------------------
                        // Turn off Filter
                        //--------------------------

                        //change button effects
                        $(this).removeClass('clickableDivOn');
                        $(this).addClass('clickableDivOff');
                        $(this).text('Filter is off');

                        //applying filter
                        TurnOffFilter();
                    }
                });
            });

            function TurnOnFilter(filterList){
                //hide all rows first (but not table header);
                $('#dataTable tr').hide();
                $('#dataTable tr:nth-child(1)').show();

                //iterate each id in the filter list
                //within each iteration, check all rows to find a matching id
                // displays matching row.
                for(var i=0;i<filterList.length;i++){
                    $('#dataTable td:nth-child(1)').each(function(){
                        if($(this).text().trim()==filterList[i]){
                            $(this).parent().show();
                        } 
                    });
                }
            }

            function TurnOffFilter(){
                //simple show all the rows
                $('#dataTable tr').show();
            }
        </script>
        <style>
            .clickableDiv{
                border: 2px solid #ddd;
                width: 200px;
                text-align:center;
                cursor: pointer;
            }

            .clickableDivOn{
                font-weight:bold;
                color: white;
                background-color: #58BE97;
            }

            .clickableDivOff{
                font-weight:bold;
                color: white;
                background-color: #EF9012;
            }

            table td, table th{
                width:33%;
                padding-left:5px;
                text-align:left;
            }
        </style>
    </head>
    <body>
        <h2>Filter Test</h2>

        <div id="showMyDataButton" class="clickableDiv clickableDivOff">Filter is off</div>

        <p></p>

        <table id="dataTable" border =1 cellspacing="1" cellpadding="1" style="width:100%">
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Marks</th>
            </tr>
            <tr>
                <td>22</td>
                <td>Smith</td>      
                <td>50</td>
            </tr>
            <tr>
                <td>23</td>
                <td>Jackson</td>        
                <td>94</td>
            </tr>
            <tr>
                <td>45</td>
                <td>Doe</td>        
                <td>80</td>
            </tr>
            <tr>
                <td>24</td>
                <td>Doe</td>        
                <td>80</td>
            </tr>
            <tr>
                <td>25</td>
                <td>Doe</td>        
                <td>80</td>
            </tr>
            <tr>
                <td>29</td>
                <td>Doe</td>        
                <td>80</td>
            </tr>
        </table>

    </body>
</html>

如何通过单击div数组来过滤记录？

1 个答案: