Home>

I want to create a table that can be filtered on WordPress.

Here I intend to edit it after implementing the same function, but
Filtering is not working or JavaScript is not working.

Error message

I checked on the console, but there was no error message.
Since html works without problems, the select box can be used, but it cannot be narrowed down even if it is selected.

Applicable source code
<select>
    <option value = "">Filter by prefecture</option>
    <option value = "Hokkaido">Hokkaido</option>
    <option value = "Aomori">Aomori</option>
    ...
</select>
<table>
    <thead>
        <tr>
            <td>number</td>
            <td>Prefecture name</td>
            <td>Read</td>
            <td>Prefectural Office Location</td>
            <td>The largest city</td>
            <td>Region</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>01</td>
            <td>Hokkaido</td>
            <td>How are you?</td>
            <td>Sapporo City</td>
            <td>Sapporo City</td>
            <td>Hokkaido</td>
        </tr>
        <tr>
            <td>02</td>
            <td>Aomori</td>
            <td>Aomoriken</td>
            <td>Aomori City</td>
            <td>Aomori City</td>
            <td>Tohoku</td>
        </tr>
        ...
    </tbody>
</table>
<script type = "text/javascript">
jQuery (function ($) {
    // Process if the select box changes
    $('# pref-select'). change (function () {
        // get the selected value
        var select_val = $('# pref-select option: selected'). val ();
        // process ttr of tbody several times
        $.each ($("# pref-table tbody tr"), function (index, element) {
            // If the selected value is blank, process to display all rows
            if (select_val == "") {
                $(element) .css ("display", "table-row");
                return true;// go to next tr
            }
            // fetch one line as text and check if there is a value selected in the select box
            var row_text = $(element) .text ();
            if (row_text.indexOf (select_val)! = -1) {
                // display if found
                $(element) .css ("display", "table-row");
            } else {
                // Hide if not found
                $(element) .css ("display", "none");
            }
        });
    });
});
</script>

・ Using plug-ins (Simple Custom css and JavaScript)

・ Confirmation of JavaScript/jQuery writing method ( here for reference)
→ jQuery (function ($) {} so it seemed no problem

Sorry, this is a rudimentary question because you have little knowledge of JavaScript. Could you please tell me?

  • Answer # 1

    You should have added the following first

Related articles