javascript - Ajax 调用 HTML 表

Question

我已经有一个函数，可以从数据库获取数据并将其填充到组合框更改事件的 HTML 表中，基本上我是使用 ajax 来执行此操作的。

但是每次我在组合框更改上调用数据库时，效率很低。所以，现在我决定首先在页面加载时将数据填充到 html 表中，然后从 HTML 表中过滤掉，而不是每次都访问数据库并过滤它。

那么有什么方法可以过滤掉组合框更改事件中的 html 表中的数据吗？或者可以在 html 表上调用 ajax 吗？

谢谢。

Answer 1

您可以对每个 <tr> 进行分类与组合框项目上的值相匹配。选择某个选项后，显示具有与所选选项的值匹配的类的所有行。

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

那很有趣。 jsfiddle