Skip to content

Search within a table

I have a table on a page and I need to search within it i.e., like a filter….when i type within the search it should filter the results from the table

Need JavaScript code for the same as not an expert.

enter code here https://jsfiddle.net/jgdqbxhn/

function myFunction() {
    // Declare variables
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");

    // Loop through all table rows, and hide those who don't match the search query
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
            txtValue = td.textContent || td.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }
}
#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 */
}
<p>
    <input
        id="myInput"
        onkeyup="myFunction()"
        placeholder="Search for videos.."
        type="text"
    />
</p>

<table id="myTable"></table>

<table style="width: 100%; table-layout: fixed">
    <tbody>
        <tr>
            <td
                class="mt-bgcolor-dddddd"
                rowspan="5"
                style="vertical-align: top"
            >
                &nbsp; &nbsp; &nbsp; &nbsp;<br />
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;<a
                    href="/Archive/eLearning_Library"
                    title="eLearning Library"
                    ><img
                        alt=""
                        class="internal default"
                        height="33px"
                        src="/@api/deki/files/16797/goBack.png"
                        style="width: 112px; height: 33px"
                        width="112px"
                /></a>

                <p class="mt-align-center">&nbsp;</p>

                <p class="mt-align-center">
                    <span class="mt-font-arial"
                        ><strong
                            ><img
                                alt=""
                                class="internal default"
                                src="/@api/deki/files/16823/hot-png-46885.png" /></strong
                    ></span>
                </p>

                <p class="mt-align-center">&nbsp;</p>
            </td>
            <td
                class="mt-bgcolor-ecf0f1"
                colspan="4"
                rowspan="1"
                style="vertical-align: top"
            >
                <img
                    alt=""
                    class="internal default"
                    height="63px"
                    src="/@api/deki/files/16820/eyes.jpg"
                    style="width: 979px; height: 63px"
                    width="979px"
                />
            </td>
        </tr>
        <tr>
            <td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">
                <dl>
                    <dt class="mt-align-center">
                        <strong
                            ><a
                                class="F1"
                                href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Real_Time_Staging"
                                title="documentationcenter.com/Archive/eLearning_Library/Client_Learning_Webinar_Series/Real_Time_Staging"
                                ><img
                                    alt=""
                                    class="internal default"
                                    height="51.9922px"
                                    src="/@api/deki/files/16778/Real_Time_Staging_-_November_2021.png"
                                    style="width: 97.9948px; height: 51.9922px"
                                    width="97.9948px" /></a
                        ></strong>
                    </dt>
                </dl>

                <p class="mt-align-center">
                    <span class="mt-font-size-14"
                        ><span class="mt-font-arial"
                            ><strong
                                ><strong
                                    ><a
                                        class="F1"
                                        href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Real_Time_Staging"
                                        title="Real Time Staging"
                                        >REAL TIME STAGING - NOVEMBER 2021</a
                                    >&nbsp;</strong
                                ></strong
                            ></span
                        ></span
                    >
                </p>
            </td>
            <td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">
                <dl>
                    <dt class="mt-align-center">
                        <strong
                            ><a
                                class="F1"
                                href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Real_Time_Staging"
                                title="documentationcenter.com/Archive/eLearning_Library/Client_Learning_Webinar_Series/Real_Time_Staging"
                                ><img
                                    alt=""
                                    class="internal default"
                                    height="51.9922px"
                                    src="/@api/deki/files/16778/Real_Time_Staging_-_November_2021.png"
                                    style="width: 97.9948px; height: 51.9922px"
                                    width="97.9948px" /></a
                            >&nbsp;&nbsp;</strong
                        >
                    </dt>
                </dl>

                <p class="mt-align-center">
                    <span class="mt-font-arial"
                        ><span class="mt-font-size-14"
                            ><strong
                                ><strong
                                    >&nbsp;<a
                                        href="/@api/deki/files/16781/Real_Time_Staging_-_Presentation_Material.pdf"
                                        target="_blank"
                                        title="https://documentationcenter.com/@api/deki/files/16781/Real_Time_Staging_-_Presentation_Material.pdf?origin=mt-web"
                                        >REAL TIME STAGING -
                                        PRESENTATION&nbsp;</a
                                    ></strong
                                ></strong
                            ></span
                        ></span
                    >
                </p>
            </td>
            <td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">
                <dl>
                    <dt class="mt-align-center">
                        <a
                            class="F1"
                            href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Underwriting_for_New_Business"
                            title="Archive/eLearning_Library/Client_Learning_Webinar_Series/Underwriting_for_New_Business"
                            ><strong
                                ><img
                                    alt=""
                                    class="internal default"
                                    height="60.9896px"
                                    src="/@api/deki/files/16783/Reinsurance_Capability.png"
                                    style="width: 93.9974px; height: 60.9896px"
                                    width="93.9974px" /></strong
                        ></a>
                        <strong>&nbsp;&nbsp;</strong>
                    </dt>
                </dl>

                <p class="mt-align-center">
                    <span class="mt-font-size-14"
                        ><span class="mt-font-arial"
                            ><a
                                class="F1"
                                href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Underwriting_for_New_Business"
                                title="Underwriting for New Business"
                                ><strong
                                    >UNDERWRITING FOR NEW BUSINESS - AUGUST
                                    2021</strong
                                ></a
                            >
                        </span></span
                    >
                </p>
            </td>
            <td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">
                <dl>
                    <dt class="mt-align-center">
                        <a
                            class="F1"
                            href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Underwriting_for_New_Business"
                            title="Archive/eLearning_Library/Client_Learning_Webinar_Series/Underwriting_for_New_Business"
                            ><strong
                                ><img
                                    alt=""
                                    class="internal default"
                                    height="60.9896px"
                                    src="/@api/deki/files/16783/Reinsurance_Capability.png"
                                    style="width: 93.9974px; height: 60.9896px"
                                    width="93.9974px" /></strong></a
                        ><strong>&nbsp;&nbsp;</strong>
                    </dt>
                </dl>

                <p class="mt-align-center">
                    <span class="mt-font-size-14"
                        ><span class="mt-font-arial"
                            ><a
                                href="/@api/deki/files/16798/Underwriting_for_New_Business.pdf"
                                target="_blank"
                                title="https://documentationcenter.com/@api/deki/files/16798/Underwriting_for_New_Business.pdf?origin=mt-web"
                                ><strong
                                    >UNDERWRITING FOR NEW BUSINESS -
                                    PRESENTATION&nbsp;</strong
                                ></a
                            ></span
                        ></span
                    >
                </p>
            </td>
        </tr>
        <tr>
            <td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">
                <dl>
                    <dt class="mt-align-center">
                        <a
                            class="F1"
                            href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Data_Transfer_Tool"
                            title="Archive/eLearning_Library/Client_Learning_Webinar_Series/Data_Transfer_Tool"
                            ><img
                                alt=""
                                class="internal default"
                                height="54.2448px"
                                src="/@api/deki/files/16806/Data_Transfer_Tool.png"
                                style="width: 97.9948px; height: 54.2448px"
                                width="97.9948px"
                        /></a>
                        <strong>&nbsp;&nbsp;</strong>
                    </dt>
                </dl>

                <p class="mt-align-center">
                    <span class="mt-font-size-14"
                        ><span class="mt-font-arial"
                            ><a
                                class="F1"
                                href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Data_Transfer_Tool"
                                title="Data Transfer Tool"
                                ><strong
                                    >DATA TRANSFER TOOL -<br />
                                    MAY 2021</strong
                                ></a
                            >
                            <strong><strong>&nbsp;</strong></strong></span
                        ></span
                    >
                </p>
            </td>
            <td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">
                <dl>
                    <dt class="mt-align-center">
                        <a
                            class="F1"
                            href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Data_Transfer_Tool"
                            title="Archive/eLearning_Library/Client_Learning_Webinar_Series/Data_Transfer_Tool"
                            ><img
                                alt=""
                                class="internal default"
                                height="54.2448px"
                                src="/@api/deki/files/16806/Data_Transfer_Tool.png"
                                style="width: 97.9948px; height: 54.2448px"
                                width="97.9948px"
                        /></a>
                        <strong>&nbsp;&nbsp;</strong>
                    </dt>
                </dl>

                <p class="mt-align-center">
                    <span class="mt-font-size-14"
                        ><span class="mt-font-arial"
                            ><a
                                href="/@api/deki/files/16800/Data_Transfer_Tool.pdf"
                                target="_blank"
                                title="https://documentationcenter.com/@api/deki/files/16800/Data_Transfer_Tool.pdf?origin=mt-web"
                                ><strong
                                    >DATA TRANSFER TOOL -
                                    PRESENTATION&nbsp;</strong
                                ></a
                            ></span
                        ></span
                    >
                </p>
            </td>
            <td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">
                <dl>
                    <dt class="mt-align-center">
                        <a
                            class="F1"
                            href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Rider_Management"
                            title="Archive/eLearning_Library/Client_Learning_Webinar_Series/Rider_Management"
                            ><img
                                alt=""
                                class="internal default"
                                height="65px"
                                src="/@api/deki/files/16809/Rider_Management"
                                style="width: 115px; height: 65px"
                                width="115px"
                        /></a>
                        <strong>&nbsp;&nbsp;</strong>
                    </dt>
                </dl>

                <p class="mt-align-center">
                    <span class="mt-font-size-14"
                        ><span class="mt-font-arial"
                            ><a
                                class="F1"
                                href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Rider_Management"
                                title="documentationcenter.com/Archive/eLearning_Library/Client_Learning_Webinar_Series/Rider_Management"
                                ><strong>RIDER MANAGEMENT</strong></a
                            ></span
                        ></span
                    >
                </p>
            </td>
            <td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">
                <dl>
                    <dt class="mt-align-center">
                        <a
                            class="F1"
                            href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Rider_Management"
                            title="Archive/eLearning_Library/Client_Learning_Webinar_Series/Rider_Management"
                            ><img
                                alt=""
                                class="internal default"
                                height="65px"
                                src="/@api/deki/files/16809/Rider_Management"
                                style="width: 115px; height: 65px"
                                width="115px" /></a
                        ><strong>&nbsp;&nbsp;</strong>
                    </dt>
                </dl>

                <p class="mt-align-center">
                    <span class="mt-font-size-14"
                        ><span class="mt-font-arial"
                            ><a
                                href="/@api/deki/files/16802/Rider_Management"
                                target="_blank"
                                title="https://documentationcenter.com/@api/deki/files/16802/Rider_Management?origin=mt-web"
                                ><strong
                                    >RIDER
                                    MANAGEMENT-&nbsp;PRESENTATION&nbsp;</strong
                                ></a
                            ></span
                        ></span
                    >
                </p>
            </td>
        </tr>
        <tr>
            <td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">
                <dl>
                    <dt class="mt-align-center">
                        <a
                            class="F1"
                            href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Product_Testing_Workbench"
                            title="Archive/eLearning_Library/Client_Learning_Webinar_Series/Product_Testing_Workbench"
                            ><img
                                alt=""
                                class="internal default"
                                height="54.0625px"
                                src="/@api/deki/files/16810/PTW.png"
                                style="width: 100px; height: 54.0625px"
                                width="100px"
                        /></a>
                        <strong>&nbsp;&nbsp;</strong>
                    </dt>
                </dl>

                <p class="mt-align-center">
                    <span class="mt-font-size-14"
                        ><span class="mt-font-arial"
                            ><a
                                class="F1"
                                href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Product_Testing_Workbench"
                                title="Product Testing Workbench"
                                ><strong
                                    >PRODUCT TESTING WORKBENCH (PTW) - NOVEMBER
                                    2020</strong
                                ></a
                            >
                            <strong><strong>&nbsp;</strong></strong></span
                        ></span
                    >
                </p>
            </td>
            <td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">
                <dl>
                    <dt class="mt-align-center">
                        <a
                            class="F1"
                            href="/Archive/eLearning_Library/Client_Learning_Webinar_Series/Product_Testing_Workbench"
                            title="Archive/eLearning_Library/Client_Learning_Webinar_Series/Product_Testing_Workbench"
                            ><img
                                alt=""
                                class="internal default"
                                height="54.0625px"
                                src="/@api/deki/files/16810/PTW.png"
                                style="width: 100px; height: 54.0625px"
                                width="100px"
                        /></a>
                        <strong>&nbsp;&nbsp;</strong>
                    </dt>
                </dl>

                <p class="mt-align-center">
                    <span class="mt-font-size-14"
                        ><span class="mt-font-arial"
                            ><a
                                href="/@api/deki/files/16804/Product_Testing_Workbench.pdf"
                                target="_blank"
                                title="https://documentationcenter.com/@api/deki/files/16804/Product_Testing_Workbench.pdf?origin=mt-web"
                                ><strong
                                    >PRODUCT TESTING WORKBENCH (PTW)
                                    -&nbsp;PRESENTATION&nbsp;</strong
                                ></a
                            ></span
                        ></span
                    >
                </p>
            </td>
            <td class="mt-bgcolor-ecf0f1" style="vertical-align: middle">
                <dl>
                    <dt class="mt-align-center">
                        <img
                            alt=""
                            class="internal default"
                            height="65px"
                            src="/@api/deki/files/16811/RMD.png"
                            style="width: 116px; height: 65px"
                            width="116px"
                        />
                        <strong>&nbsp;&nbsp;</strong>
                    </dt>
                </dl>
            </td>
        </tr>
    </tbody>
</table>

Answer

An simple example of filtering using classname filter-items. You may apply the logic in your codes.

function filterItems(e) {
    const text = e.target.value.toLowerCase();

    const tds = document.querySelectorAll("td");

    const items = document.querySelectorAll(".filter-items");

    // hide all td
    tds.forEach(td => {
        td.style.display = "none";
    });

    // show filtered items
    items.forEach(item => {
        const word = item.textContent.toLowerCase();
        if (word.includes(text)) {
            item.closest("td").style.display = "";
        }
    });
}

document.querySelector("#myInput").addEventListener("keyup", filterItems);
<input id="myInput" placeholder="Search for videos.." type="text" />

<table>
    <tbody>
        <tr>
            <td><span class="filter-items">123</span></td>
            <td><span class="filter-items">125</span></td>
        </tr>
        <tr>
            <td><span class="filter-items">abc</span></td>
            <td><span class="filter-items">abe</span></td>
        </tr>
        <tr>
            <td><span class="filter-items">1AB</span></td>
            <td><span class="filter-items">1ac</span></td>
        </tr>
    </tbody>
</table>