Question

我有html表，当页面加载时加载，我有每列的下拉列表，当我从下拉列表中选择一个值时，表格应刷新所选的下拉列表值。而且我不应该调用任何服务器调用，因为html表包含所有数据。请建议我。

Answer 1

因此，您可能需要手动构建html，或者您可以按照这些步骤进行操作，

根据您的过滤器创建JS数组
通过循环或使用任何插件将此数组转换为HTML 转换
将生成的HTML绑定到容器div。

或者您可以按照此jsfiddle

<强> HTML

<title>Filter Table</title>

<body>
    <div class="optionsDiv">
        Filter By Position
        <select id="selectField">
            <option value="All" selected>All</option>
            <option value="Student">Student</option>
            <option value="Assistant">Assistant</option>
            <option value="Professor">Professor</option>

        </select>

    </div>
    <table id="myTable">
        <tr id="HeadRow">
            <td>First Name</td>
            <td>Last Name</td>
            <td>Age</td>
            <td>Position</td>
        </tr>

        <tr position="Student">
            <td>John</td>
            <td>John's Last name</td>
            <td>25</td>
            <td>Student</td>
        </tr>

        <tr position="Assistant">
            <td>Timmy</td>
            <td>Timmy's Last name</td>
            <td>22</td>
            <td>Assistant</td>
        </tr>

        <tr position="Professor">
            <td>Billy</td>
            <td>Billy's Last name</td>
            <td>40</td>
            <td>Professor</td>
        </tr>

        <tr position="Professor">
            <td>Eddy</td>
            <td>Eddy's Last name</td>
            <td>35</td>
            <td>Professor</td>
        </tr>

        <tr position="Professor">
            <td>Emma</td>
            <td>Emma's Last name</td>
            <td>38</td>
            <td>Professor</td>
        </tr>

        <tr position="Student">
            <td>Emily</td>
            <td>Emily's Last name</td>
            <td>20</td>
            <td>Student</td>
        </tr>

        <tr position="Assistant">
            <td>Jack</td>
            <td>Jack's Last name</td>
            <td>30</td>
            <td>Assistant</td>
        </tr>

        <tr position="Student">
            <td>Robert</td>
            <td>Robert's Last name</td>
            <td>20</td>
            <td>Student</td>
        </tr>

        <tr position="Assistant">
            <td>Danny</td>
            <td>Danny's Last name</td>
            <td>37</td>
            <td>Assistant</td>
        </tr>

        <tr position="Professor">
            <td>Erick</td>
            <td>Erick's Last name</td>
            <td>42</td>
            <td>Professor</td>
        </tr>
    </table>

</body>

<强> JQuery的

$(document).ready(function() {

    function addRemoveClass(theRows) {

        theRows.removeClass("odd even");
        theRows.filter(":odd").addClass("odd");
        theRows.filter(":even").addClass("even");
    }

    var rows = $("table#myTable tr:not(:first-child)");

    addRemoveClass(rows);


    $("#selectField").on("change", function() {

        var selected = this.value;

        if (selected != "All") {

            rows.filter("[position=" + selected + "]").show();
            rows.not("[position=" + selected + "]").hide();
            var visibleRows = rows.filter("[position=" + selected + "]");
            addRemoveClass(visibleRows);
        } else {

            rows.show();
            addRemoveClass(rows);

        }

    });
});

表刷新使用jquery或javascript下拉值更改

1 个答案: