Dayananda Dayananda - 16 days ago 5
HTML Question

table refresh on dropdown value change using jquery or javascript

I have html table which loaded when page get loaded, and I have dropdown for each column and when I select a value from dropdown the table should refresh for the selected dropdown value.
And I should not be calling any server call, as html table have all data.
Please suggest me on this.

Answer

So in this you may need to manually construct the html or you can follow these steps,

  1. Create JS arrays according to your filter
  2. Convert this array to HTML by looping through or use any plugins to convert
  3. Bind the HTML generated to the container div.

Or you can follows this as it is explained in this 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);

        }

    });
});