Jquery table filter

Question

I am trying to filter table results from Table B by clicking on a field in Table A using jquery. Table B contains all the data from a specific database and Table A just contains one of the fields. For example,

Table A
MFG_Name |Count
Dell | 15
Gateway|10

Clicking on Dell would filter all the results from Table B where MFG_Name = Dell and show them below Table A as follows:

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

how can I go about doing this? I've looked at using plugins that filter tables but my goal is not to have to print Table B until I have filtered it as it could contain 100000+ inventory numbers.

Answer 1

You could set a click event on table A, extract the text you clicked on and then you this jQuery plugin on table B: http://plugins.jquery.com/project/uiTableFilter

EDIT Wrote a small demo using tableFilter: http://jsfiddle.net/VjdLV/2/

Answer 2

Given mark-up similar to the following:

<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>

The following jQuery seems to work:

$('#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.