How can I select multiple items in a table using Javascript

Question

Using a example like this:

http://www.datatables.net/media/blog/bootstrap_2/

How could I select for, not filter, Firefox and Mozilla in a table. I was thinking of using select2.js to get multiple selected items. then processing the table with underscore...If there is blog, explaining this please list.

What do you want to do? Can you show what the results should look like? — Max Heiber, Jul 25 '14 at 20:08
I am trying to replicate the excel functionality of filter...The filters I have seen remove rows based a word using regex.. But I want to filter on two or three words. different words.. Please look example the browser column containing all listing of firefox and mozilla.. TIA — Merlin, Jul 25 '14 at 20:16
How is this? http://nicolas.kruchten.com/pivottable/examples/index.html. Or are you looking for an explanation of how to get select2 working and then only display selected columns? — Max Heiber, Jul 26 '14 at 15:49

score 1 · Accepted Answer · answered Jul 26 '14 at 16:51

I think what you are asking is:

I have a table and a multiple selection box. I want to use the users' selections in the multiple selection box to filter the rows of the table. If nothing is selected, all rows display. If two options are selected, only rows that correspond to those two options display. How can I do this?

This works:

HTML

<select id="browserSelect" multiple style="width:300px">
    <option value="Firefox">Firefox</option>
    <option value="Mozilla">Mozilla</option>
    <option value="IE">IE</option>
    <option value="Netscape">Netscape</option>
    <option value="Opera">Opera</option>
</select>
<table>
    <tr>
        <td>Firefox</td>
        <td>details</td>
    </tr>
    <tr>
        <td>IE</td>
        <td>details</td>
    </tr>
    <tr>
        <td>Firefox</td>
        <td>more details</td>
    </tr>
    <tr>
        <td>Netscape</td>
        <td>details</td>
    </tr>
    <tr>
        <td>Mozilla</td>
        <td>details</td>
    </tr>
    <tr>
        <td>Opera</td>
        <td>details</td>
    </tr>
</table>

JS with jQuery and Select2:

$("#browserSelect").select2().change(function () {
    var selectedBrowsers = $('select').val();
    if (selectedBrowsers) {
    //If the user made a selection, hide every row of the table
        $('tr').hide();
        //Show only rows where the text in the first column
        //corresponds to one of the user's selections
        $('td:first-child').each(function (i, cell) {
            if (selectedBrowsers.indexOf($(cell).text()) > -1) {
                $(cell).parent().show();
            }
        });
    } else {
    //Show all rows when there is no selection
        $('tr').show();
    }
});

http://jsfiddle.net/Q526A/3/

I used Select2 to make the multiple selection box more user-friendly, as you suggested.

How would I start out a blank table.. $('tr').show...does not works...I started a bounty for you... — Merlin, Jul 28 '14 at 03:10
How I limit to a single table... right now $ is effecting two tables on page.. It also removes the header row — Merlin, Jul 28 '14 at 04:04
Hi @Merlin. The `$(selector)` syntax uses CSS selectors to target specific elements in the page. In my example, the selectors are very general. `$('tr')` will target any row whatsoever. To make the selectors more specific, use CSS classes or IDs. `$('tr.browsers')` will target any tr elements with class `browsers`. You define that sort of element like this ` ... `. Please let me know if you need me to update the fiddle to demonstrate. Unfortunately, I don't understand your other question about blank tables. Can you explain? — Max Heiber, Jul 29 '14 at 14:05

How can I select multiple items in a table using Javascript

1 Answers1