使用jquery或javascript更改下拉列表值时的表刷新_Javascript_Jquery_Html

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

javascript jquery html

使用jquery或javascript更改下拉列表值时的表刷新,javascript,jquery,html,Javascript,Jquery,Html,我有一个html表格，在页面加载时加载，我有每个列的下拉列表，当我从下拉列表中选择一个值时，表格应该为所选的下拉列表值刷新。我不应该调用任何服务器调用，因为html表包含所有数据。请就此向我提出建议。因此，在此过程中，您可能需要手动构建html，或者您可以按照以下步骤操作根据过滤器创建JS数组通过循环或使用任何插件将此数组转换为HTML 转换将生成的HTML绑定到容器div。或者你也可以按照这篇文章的解释来做 HTML 提供你的html和jquery你已经尝试过的东西把你的代码放在小

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

请就此向我提出建议。

因此，在此过程中，您可能需要手动构建html，或者您可以按照以下步骤操作

根据过滤器创建JS数组通过循环或使用任何插件将此数组转换为HTML 转换将生成的HTML绑定到容器div。或者你也可以按照这篇文章的解释来做

HTML

提供你的html和jquery你已经尝试过的东西把你的代码放在小提琴上…如果你对任何第三方网格都满意，你可以使用谢谢大家。只使用jquery是可能的-没有第三方插件。请指导我。因此，在此过程中，您可能需要手动构建html，或者您可以按照以下步骤操作：1根据过滤器创建JS数组；2通过循环或使用任何插件将此数组转换为html；3将生成的html绑定到容器分区。嗨，Sibeesh，感谢您的帮助并感谢您的快速响应。我想通过许多下拉选择选项来过滤它，从我看到的示例中，就像在示例中一样，如果我想通过年龄、姓名、姓氏来过滤它，我需要在这里做什么？由于表是静态表，我是否需要构造年龄=和姓氏=？@Dayananda如果有帮助，请接受作为答案，这就是我们在这里表示感谢的方式：是的，您可以用这种方式尝试。但正如我在评论部分所说，如果您使用任何网格插件，这将非常容易。谢谢，汉克斯，问题是我有14个过滤器，这就是问题所在。让我们检查一下，你们给我的例子有可能改变吗

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

$(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);

        }

    });
});