Ajax调用HTML表

Question

I already have a function where I am getting data from database and fill it in HTML table on combo-box change event basically I am doing this using ajax.

But every time I am calling the database on combo-box change which is not efficient. So, now I decided I fill the data in the html table initially on page load and then filter out from the HTML table instead of every time going to the database and filter it.

So is there any way of filter out data from the html table on combo box change event? or it is possible to call ajax on html table?

Thanks.

Answer 1

You could put classes on each <tr> which match values on the combo-box items. When an option is selected, show any rows that have a class that matches a value of the selected options.

<select id="options" multiple="multiple">
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    <option value="yellow">Yellow</option>
    <option value="black">Black</option>
</select>

<table>
    <tr class="red green">
        <td>red or green</td>
    </tr>
    <tr class="blue">
        <td>blue</td>
    </tr>
    <tr class="yellow black">
        <td>yellow or black</td>
    </tr>
    <tr class="blue yellow">
        <td>blue or yellow</td>
    </tr>
</table>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
    $("select#options").change(function () {
        var selections = [];

        $(this).children(':selected').each(function (index, option) {
            selections.push(option.value);
        });

        console.log(selections);
        $("table tr").each(function (index, row) {
            $(row).hide();
            for(var i = 0; i < selections.length; i++) {
                if($(row).hasClass(selections[i])) {
                    $(row).show();
                    break;
                }
            }
        });
    });
</script>

That was fun. jsfiddle