Question

使用jQuery对多列进行表搜索功能？

<table>
    <tr>
       <th><input type="text" id="search" placeholder="  live search"></input></th>
       <th><input type="text" id="search" placeholder="  live search"></input></th>
    </tr>
    <tr><th>Unique ID</th><th>Random ID</th></tr>
    <tr><td>214215</td><td>442</td></tr>
    <tr><td>1252512</td><td>556</td></tr>
    <tr><td>2114</td><td>4666</td></tr>
    <tr><td>3245466</td><td>334</td></tr>
    <tr><td>24111</td><td>54364</td></tr>
</table>
<br />
<script>
    $("#search").on("keyup", function() {
        var value = $(this).val();

        $("table tr").each(function(index) {
            if (index !== 0) {

                $row = $(this);

                var id = $row.find("td:first").text();

                if (id.indexOf(value) !== 0) {
                    $row.hide();
                }
                else {
                    $row.show();
                }
            }
        });
    });
 </script>

我试图在不使用jquery插件的情况下实现搜索功能..

jsfiddle链接在这里

http://jsfiddle.net/y9Lxdvps/1/

Answer 1

使用https://api.jquery.com/index/

var inputs = $('table tr:first th input[type=text]');
var trs = $('table tr + tr + tr');

inputs.keyup(function()
{
    trs.each(function()
    {
        var tr = $(this);

        var show = inputs.toArray().every(function(input, index)
        {
            var value = $(input).val();

            if (value === '')
            {
                return true;
            }

            var number = index + 1;
            var td = tr.children('td:nth-child(' + number + ')');
            var text = td.text();

            return text.indexOf(value) != -1;
        });

        tr[show ? 'show' : 'hide']();
    });
});

如何使用jQuery搜索具有多列输入的表？

1 个答案: