javascript - 表格搜索框

Question

鉴于此表:

<table class="tbllist searchtbl" cellpadding=2 cellspacing=0 style="width: 70%">
    <tr>
        <th class="hidden">ID</th>
        <th>Number Plate</th>
        <th>Chassis Number</th>
        <th>Trailer Make</th>
        <th>Year</th>
        <th>Axles</th>
        <th></th>
    </tr>
    <tr class='tbl'>
        <td class='hidden'>3</td>
        <td>
            <input type=text  style = 'width: 75px'  class='centered'  id='trnumberplate_3' name='trnumberplate_3'  value='T212ABS'  onfocus='this.oldvalue = this.value;' onchange='updatevalue("trailers","trnumberplate", this.value ,"trid","3","","1",this, "false")'>
        </td>
        <td>
            <input type=text  style = 'width: 200px'  id='trchassisnumber_3' name='trchassisnumber_3'  value='AJSDGASJH'  onfocus='this.oldvalue = this.value;' onchange='updatevalue("trailers","trchassisnumber", this.value ,"trid","3","","1",this, "false")'>
        </td>
        <td>
            <input type=text  style = 'width: 200px'  id='trmake_3' name='trmake_3'  value='LOW LOADER'  onfocus='this.oldvalue = this.value;' onchange='updatevalue("trailers","trmake", this.value ,"trid","3","","1",this, "false")'>
        </td>
        <td>
            <input type=text  style = 'width: 50px'  class='centered'  id='tryear_3' name='tryear_3'  value='2009'  onfocus='this.oldvalue = this.value;' onchange='updatevalue("trailers","tryear", this.value ,"trid","3","1","",this, "false")'>
        </td>
        <td>
            <input type=text  style = 'width: 25px'  class='centered'  id='traxles_3' name='traxles_3'  value='3'  onfocus='this.oldvalue = this.value;' onchange='updatevalue("trailers","traxles", this.value ,"trid","3","1","",this, "false")'>
        </td>
        <td class='delbtn'>
            <button id='trailers_3'  title='DELETE THIS ITEM (3)?' onclick='event.preventDefault(); delitem("trailers","trid","3","trailers.php","#workspace")'><img src='/icons/delete.png' ></button>
        </td>
    </tr>
</table>

我有以下搜索功能:

function searchbox() {
    // text input search for tables (such as trip history etc)
    $("#search").keyup(function () {
        //split the current value of searchInput
        var data = this.value.toUpperCase().split(" ");
        //create a jquery object of the rows
        var jo = $(".tbllist").find("tr").not("tr:first"); // exclude headers
        if (this.value == "") {
            jo.show();
            return;
        }
        //hide all the rows
        jo.hide();

        //Recusively filter the jquery object to get results.
        jo.filter(function (i, v) {
            var $t = $(this);
            for (var d = 0; d < data.length; ++d) {
                if ($t.is(":contains('" + data[d] + "')")) {
                    return true;
                }
            }
            return false;
        })
        //show the rows that match.
        .show();
    })

它将循环遍历表 td 以检查搜索到的值是否可用并过滤行。如果 td 包含具有搜索值的输入文本元素，则不会进行过滤。

更新:

if ($t.find("input").val().toUpperCase().indexOf(data[d]) > 0) {
    return true;
}

现在可以工作，但只会匹配表格的第一列。

JSFiddle:https://jsfiddle.net/fabriziomazzoni79/30d52c9z/

Answer 1

像这样更改jo.filter():

jo.filter(function (i, v) {

    var txt = '';

    $(v).find("input").each(function(n,e){
        txt += e.value;
    });

    for(var d=0; d<data.length; d++){
       if (txt.search(data[d])>=0) {
            return true;
       }
    }

    return false;

})

fiddle here .