php & jquery (keyup) 过滤表

Question

有人可以帮我解决这个问题吗？我正在尝试过滤我使用 phpadmin 完成的表：

        <table align="center" border="1" cellspacing="0" cellpadding="0" width="700" id="table">
            <thead>
                <th>id</th>
                <th>Subject</th>
                <th>Name</th>
                <th>Description</th>
                <th>Hours</th>
                <th>Action</th>

            </thead>

            <?php
            $sql=mysql_query("SELECT * FROM home");
            $i=1;
                while($row=mysql_fetch_array($sql)){
                    echo "<tr>
                            <td>".$i."</td>
                            <td>".$row['subject_id']."</td>
                            <td>".$row['name']."</td>
                            <td>".$row['description']."</td>
                            <td>".$row['hours']."</td>
                            <td align='center'>

                            </td>
                    </tr>";
                    $i++;
                }
            ?>

我必须过滤表格.. 只显示主题（我的意思是，例如，如果我写“微积分”，我应该得到该主题的所有行） 注意：我想使用 keyup 事件。

我尝试了很多次都没有成功..:(。很多人使用'div classes'来过滤表，我不知道该怎么做:(。 我需要这样的东西： http://jsfiddle.net/FranWahl/rFGWZ/

希望你能帮助我:( 谢谢！

Answer 1

如果你必须使用半香草 JS，我会使用 jQuery：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

添加输入：

<input id="search" type="text">

最后，在 keyup 上编写一个简单的 jQuery 循环，将所有匹配值的行添加到数组中并隐藏其余行：

<script>
    $(document).ready(function() {
        $('#search').off('keyup');
        $('#search').on('keyup', function() {
            // Your search term, the value of the input
            var searchTerm = $('#search').val();
            // table rows, array
            var tr = [];

            // Loop through all TD elements
            $('#table').find('td').each(function() {
                var value = $(this).html();
                // if value contains searchterm, add these rows to the array
                if (value.toLowerCase().includes(searchTerm.toLowerCase())) {
                    tr.push($(this).closest('tr'));

                }
            });

            // If search is empty, show all rows
            if ( searchTerm == '') {
                $('tr').show();
            } else {
                // Else, hide all rows except those added to the array
                $('tr').not('thead tr').hide();
                tr.forEach(function(el) {
                    el.show();
                });
            }
        });
    });
</script>

https://jsfiddle.net/ur4ck2u1/