Search and Filter HTML Table using DropDownList and RadioButton in JavaScript

Waghmare

SOLVED CLOSED ACTIVE ANSWERED
User: Waghmare
Posted: on Feb 04, 2021 02:00 AM
Forum: JavaScript
Answer: 1
Views: 21508
Sample Code: Download

Hi Team,

I have bind HTML table with array data using Javascript.

Bind dropdown to select filter options.

Radio button for filter options.

Table contains students data like Sr No, Name, English, Maths, Science, Social Science

Where select dropdown contains the Subject name (English, Maths, Science, Social Science).

Radio Buttons - above, below, between

Textbox for Filter - input type for filter value

Operation - user will select Subject name from select dropdown- then click on any of the radio button (above, below, between) and then enter value in textbox --> click on Filter button then table should show the filtered data.

below is the code i have tried.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #myInput {
            background-image: url('/css/searchicon.png'); /* Add a search icon to input */
            background-position: 10px 12px; /* Position the search icon */
            background-repeat: no-repeat; /* Do not repeat the icon image */
            width: 100%; /* Full-width */
            font-size: 16px; /* Increase font-size */
            padding: 12px 20px 12px 40px; /* Add some padding */
            border: 1px solid #ddd; /* Add a grey border */
            margin-bottom: 12px; /* Add some space below the input */
        }

        #StudentTable {
            border-collapse: collapse; /* Collapse borders */
            width: 100%; /* Full-width */
            border: 1px solid #ddd; /* Add a grey border */
            font-size: 18px; /* Increase font-size */
        }

            #StudentTable th, #StudentTable td {
                text-align: left; /* Left-align text */
                padding: 12px; /* Add padding */
            }

            #StudentTable tr {
                /* Add a bottom border to all table rows */
                border-bottom: 1px solid #ddd;
            }

                #StudentTable tr.header, #StudentTable tr:hover {
                    /* Add a grey background color to the table header and on hover */
                    background-color: #f1f1f1;
                }
    </style>
    <script>
        function onPageLoad() {

        }
        function filterBy() {
            // TO get the column index
            var e = document.getElementById("subjects");
            var value = e.options[e.selectedIndex].value;
        }
        function clear() {
            debugger;
            document.getElementById("mark").value = '';

        }

        function filterClick() {
            // Declare variables
            var input, filter, table, tr, td, i, txtValue;
            input = document.getElementById("mark");
            filter = input.value.toUpperCase();
            table = document.getElementById("StudentTable");
            tr = table.getElementsByTagName("tr");
            debugger;
            // TO get the column index
            var e = document.getElementById("subjects");
            var value = e.options[e.selectedIndex].value;
            var colValue;
            if (value = 'English') {
                colValue = 2;
            }
            else if (value = 'Maths') {
                colValue = 3;
            }
            else if (value = 'Science') {
                colValue = 4;
            }
            else if (value = 'Social Science') {
                colValue = 5;
            }

            // Loop through all table rows, and hide those who don't match the search query
            for (i = 0; i < tr.length; i++) {
                debugger;
                td = tr[i].getElementsByTagName("td")[colValue];
                if (td) {
                    txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
        }
    </script>
</head>
<body>
    Subject : <select id="subjects">
        <!--onchange="filterBy()-->
        <option id="ops0" value="" selected="selected">--Select Subject--</option>
        <option id="ops1" value="English">English</option>
        <option id="ops2" value="Maths">Maths</option>
        <option id="ops3" value="Science">Science</option>
        <option id="ops4" value="Social Science">Social Science</option>
        <!--<option value="2" selected="selected">English</option>
        <option value="3">Maths</option>
        <option value="4">Science</option>
        <option value="5">Social Science</option>-->
    </select>
    Filter by - :
    <input type="radio" id="above" name="mode" value="above">
    <label for="Above">Above</label>
    <input type="radio" id="below" name="mode" value="below">
    <label for="female">Below</label>
    <input type="radio" id="between" name="mode" value="between">
    <label for="other">Between</label>
    <!--<input type="text" id="myInput" placeholder="Search..">--> <!--onkeyup="myFunction()"-->
    <input type="number" id="mark">
    <input type="button" value="Filter" onclick="filterClick()">
    <input type="button" value="Clear" onclick="clear()">
    <table id="StudentTable">
        <tr class="header">
            <th style="width:10%;">Sr No</th>
            <th style="width:20%;">Name</th>
            <th style="width:20%;">English</th>
            <th style="width:20%;">Maths</th>
            <th style="width:20%;">Science</th>
            <th style="width:20%;">Social Science</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Alfreds Futterkiste</td>
            <td>60</td>
            <td>50</td>
            <td>80</td>
            <td>50</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Ravi Waghmare</td>
            <td>30</td>
            <td>40</td>
            <td>90</td>
            <td>100</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Bhaga M</td>
            <td>86</td>
            <td>67</td>
            <td>97</td>
            <td>60</td>
        </tr>
    </table>
</body>
</html>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Feb 04, 2021 07:26 AM
Modified: on Feb 04, 2021 07:32 AM
Report

Check with below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
        Subject :
    <select id="subjects">
        <option id="ops0" value="" selected="selected">--Select Subject--</option>
        <option id="ops1" value="English">English</option>
        <option id="ops2" value="Maths">Maths</option>
        <option id="ops3" value="Science">Science</option>
        <option id="ops4" value="Social Science">Social Science</option>
    </select>
        <br />
        Filter by - :
    <input type="radio" id="above" name="mode" value="above" />
        <label for="Above">Above</label>
        <input type="radio" id="below" name="mode" value="below" />
        <label for="female">Below</label>
        <input type="radio" id="between" name="mode" value="between" />
        <label for="other">Between</label>
        <br />
        <input type="number" id="mark" />
        <input type="button" value="Filter" onclick="filterClick()" />
        <input type="button" value="Clear" onclick="clear()" />
        <table id="StudentTable">
            <tr class="header">
                <th style="width: 10%;">Sr No</th>
                <th style="width: 20%;">Name</th>
                <th style="width: 20%;">English</th>
                <th style="width: 20%;">Maths</th>
                <th style="width: 20%;">Science</th>
                <th style="width: 20%;">Social Science</th>
            </tr>
            <tr>
                <td>1</td>
                <td>Alfreds Futterkiste</td>
                <td>60</td>
                <td>50</td>
                <td>80</td>
                <td>50</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Ravi Waghmare</td>
                <td>30</td>
                <td>40</td>
                <td>90</td>
                <td>100</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Bhaga M</td>
                <td>86</td>
                <td>67</td>
                <td>97</td>
                <td>60</td>
            </tr>
        </table>
        <style>
            #myInput {
                background-image: url('/css/searchicon.png'); /* Add a search icon to input */
                background-position: 10px 12px; /* Position the search icon */
                background-repeat: no-repeat; /* Do not repeat the icon image */
                width: 100%; /* Full-width */
                font-size: 16px; /* Increase font-size */
                padding: 12px 20px 12px 40px; /* Add some padding */
                border: 1px solid #ddd; /* Add a grey border */
                margin-bottom: 12px; /* Add some space below the input */
            }

            #StudentTable {
                border-collapse: collapse; /* Collapse borders */
                width: 100%; /* Full-width */
                border: 1px solid #ddd; /* Add a grey border */
                font-size: 18px; /* Increase font-size */
            }

                #StudentTable th, #StudentTable td {
                    text-align: left; /* Left-align text */
                    padding: 12px; /* Add padding */
                }

                #StudentTable tr {
                    /* Add a bottom border to all table rows */
                    border-bottom: 1px solid #ddd;
                }

                    #StudentTable tr.header, #StudentTable tr:hover {
                        /* Add a grey background color to the table header and on hover */
                        background-color: #f1f1f1;
                    }
        </style>
        <script>
            function clear() {
                document.getElementById("mark").value = '';
            }

            function filterClick() {
                var input, filter, table, tr, td, i, txtValue;
                input = document.getElementById("mark");
                filter = input.value.toUpperCase();
                var subjects = document.getElementById("subjects");
                var subject = subjects.options[subjects.selectedIndex].value;
                var colValue;
                if (subject == 'English') {
                    colValue = 2;
                } else if (subject == 'Maths') {
                    colValue = 3;
                } else if (subject == 'Science') {
                    colValue = 4;
                } else if (subject == 'Social Science') {
                    colValue = 5;
                }

                var modes = document.getElementsByName('mode');
                var mode;
                for (var i = 0; i < modes.length; i++) {
                    if (modes[i].checked) {
                        mode = modes[i].value;
                        break;
                    }
                }

                table = document.getElementById("StudentTable");
                tr = table.getElementsByTagName("tr");
                for (i = 1; i < tr.length; i++) {
                    td = tr[i].getElementsByTagName("td")[colValue];
                    tr[i].style.display = "none";
                    var cellValue = parseInt(td.innerHTML);
                    if (mode == 'above') {
                        if (cellValue > parseInt(filter)) {
                            tr[i].style.display = "";
                        }
                    } else if (mode == 'below') {
                        if (cellValue < parseInt(filter)) {
                            tr[i].style.display = "";
                        }
                    } else if (mode == 'between') {
                        if (cellValue == parseInt(filter)) {
                            tr[i].style.display = "";
                        }
                    }
                }
            }
        </script>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Search and Filter HTML Table using DropDownList and RadioButton in JavaScript

Company

Explore

Follow us

Contact Us