JS表搜索/排序/筛选

JS table search/sort/filter

本文关键字：排序 筛选 搜索 JS      更新时间：2023-09-26

在表中搜索时遇到问题。就像我试过list.js，但没用。我找到了这段代码，但也不起作用。

var $rows = $('#table tr');
        $('#search').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();
        });

我测试了一下，这个函数甚至不会触发。我试着保持警觉。我看不出有什么问题，但我对JS/jQuery不太好，所以也许我在某个地方犯了错误：/

BTW：这是表格HTML:

<table id="table" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
    <tr>
        <th></th>
        <th>Jméno</th><th>Příjmení</th>
        <th>Adresa</th><th>Datum narození</th>
        <th>Pohlaví</th><th>Připomenutí</th>
        <th>Poslední kontakt</th><th>Skupina</th>
    </tr>
    <tr style='cursor:pointer;' onclick='window.location.href = "./mf_contact_form.php?cid=168"'>
        <td>
            <span style='margin: 0px; padding: 0px; width:1px; background:#da00ff; float:left; margin-left: -20px; height: 100%;'></span><img src='[HIDDEN]' style='width: 64px; height: 64px; border-radius: 50%;'>
        </td>
        <td>
            Test
        </td>
        <td>
            Test
        </td>
        <td>
            Test
        </td>
        <td>
            5615-12-06
        </td>
        <td>
            Muž
        </td>
        <td>
            3x za týden
        </td>
        <td>
            Žádná historie
        </td>
        <td>
            gjh
        </td>
    </tr>
</table>

它是由PHP生成的，但我不认为这会导致这个问题。

正如Yury Tarabanko所说（"当你执行代码时，#search输入真的可用吗？试试console.log($('#search').length)。如果长度为0。您需要将脚本标记放在主体的末尾（至少在输入和表下方），或者使用dom就绪事件$(function(){/*your code here*/})"–Yury Tarabanko）

执行代码时输入不可用

相关文章：