Question

我试图通过使用jquery单击表A中的字段来过滤表B中的表结果。表B包含来自特定数据库的所有数据，表A只包含其中一个字段。例如，

Table A
MFG_Name |Count
Dell | 15
Gateway|10

点击戴尔将过滤表B中MFG_Name =戴尔的所有结果，并在表A下方显示如下：

Table B
Inventory_No | MFG_Name | Model_Name | Description
0001          | Dell     |Inspiron    |Desktop
0002          | Dell     |Optiplex    |Desktop

我该怎么做呢？我已经看过使用过滤表过滤表，但我的目标是不必打印表B，直到我过滤它，因为它可能包含100000多个库存号。

Answer 1

您可以在表A上设置点击事件，提取您单击的文本，然后在表B上显示此jQuery插件：http://plugins.jquery.com/project/uiTableFilter

修改用tableFilter写了一个小的演示：http://jsfiddle.net/VjdLV/2/

Answer 2

鉴于以下类似的加价：

<table id="manufacturers">
    <thead>
        <tr>
            <th>Manufacturer name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Dell</td>
        </tr>
        <tr>
            <td>Packard Bell</td>
        </tr>
    </tbody>
</table>

<table id="computers">
    <thead>
        <tr>
            <th>Manufacturer name</th>
            <th>Model number</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Dell</td>
            <td>Vostro</td>
        </tr>
        <tr>
            <td>Dell</td>
            <td>E1405</td>
        </tr>
        <tr>
            <td>Dell</td>
            <td>Inspiron 1525</td>
        </tr>
        <tr>
            <td>Packard Bell</td>
            <td>F7305</td>
        </tr>
        <tr>
            <td>Packard Bell</td>
            <td>Easy Note A7</td>
        </tr>
        <tr>
            <td>Hewlett Packard</td>
            <td>Touchpad</td>
        </tr>
        <tr>
            <td>Hewlett Packard</td>
            <td>Pavilion Elite</td>
        </tr>
    </tbody>
</table>

以下jQuery似乎有效：

$('#manufacturers td').click(
    function(){
        var m = $(this).text();
        $('#computers tr')
            .hide()
            .filter(
                function(){
                    if ($(this).find('td:first-child').text() == m){
                        return this;
                    }
                })
            .show();
    });

JS Fiddle

Answer 3

您可以尝试这样的代码：

$("table.a td.mfg_name").click(function(){

    var mfg_name = $(this).text();

    $("table.b tr").each(function(){

        if($(this).find("td.mfg_name").text().indexOf(mfg_name) != -1){
            $(this).show();
        }
        else{
            $(this).hide();
        }
    });
});

Jquery表过滤器

3 个答案: