respected sirmadami created combox and text box combobox value must displaied in textbox i got this code from you but now search button is not workinghow to serach text box value in table and text value must by combobox i need this codeltscriptgtfunction myFunction var input filter found table tr td i j input documentgetElementById34myInput34 filter inputvaluetoUpperCase table documentgetElementById34myTable34 tr tablegetElementsBy

Hi sushmardCheck this example Now please take its reference and correct your codelthtml xmlns34httpwwww3org1999xhtml34gtltheadgt lttitlegtlttitlegt ltstyle type34textcss34gt body fontfamily Arialfontsize 10pt table border 1px solid ccc table th backgroundcolor F7F7F7color 333fontweight bold table th table td padding 5pxbordercolor ccc ltstylegt ltscript type34textjavascript34gt function myFunction var input filter table tr td i j cellValue input documentgetElementById34myInput34 filter inputvaluetoUpperCase table documentgetElementById34myTable34 tr tablegetElementsByTagName34tr34 for i 0 i lt trlength i td trigetElementsByTagName34td34 if td

Filter (Search) HTML Table based on TextBox value on Button Click in JavaScript

sushmard

SOLVED CLOSED ACTIVE ANSWERED
User: sushmard
Posted: on Jul 22, 2019 05:52 AM
Forum: JavaScript
Answer: 1
Views: 10743
Sample Code: Download

respected sir/madam

i created combox and text box combobox value must displaied in textbox i got this code from you but now search button is not working.

how to serach text box value in table and text value must by combobox i need this code

<script>
function myFunction() {
  var input, filter, found, table, tr, td, i, j;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td");
        for (j = 0; j < td.length; j++) {
            if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                found = true;
            }
        }
        if (found) {
            tr[i].style.display = "";
            found = false;
        } else {
            tr[i].style.display = "none";
        }
    }
}
</script>

    <script type="text/javascript">
        function SelectedTextValue(ele) {
            if (ele.selectedIndex > 0) {
                var selectedText = ele.options[ele.selectedIndex].innerHTML;
                var selectedValue = ele.value;
                document.getElementById("myInput").value = selectedText;
            }
            else {
                document.getElementById("myInput").value = "";
            }
        }
    </script>

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Jul 23, 2019 03:36 AM
Report

Hi sushmard,

Check this example. Now please take its reference and correct your code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body { font-family: Arial;font-size: 10pt; }
        table { border: 1px solid #ccc; }
        table th { background-color: #F7F7F7;color: #333;font-weight: bold; }
        table th, table td { padding: 5px;border-color: #ccc; }
    </style>
    <script type="text/javascript">
        function myFunction() {
            var input, filter, table, tr, td, i, j, cellValue;
            input = document.getElementById("myInput");
            filter = input.value.toUpperCase();
            table = document.getElementById("myTable");
            tr = table.getElementsByTagName("tr");
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td");
                if (td) {
                    for (j = 0; j < td.length; j++) {
                        cellValue = td[j].textContent || td[j].innerText;
                        if (cellValue.trim().toUpperCase().indexOf(filter) > -1) {
                            tr[i].style.display = "";
                            break;
                        } else {
                            tr[i].style.display = "none";
                        }
                    }
                }
            }
        }
        function SelectedTextValue(ele) {
            if (ele.selectedIndex > 0) {
                var selectedText = ele.options[ele.selectedIndex].innerHTML;
                var selectedValue = ele.value;
                document.getElementById("myInput").value = selectedText;
            }
            else {
                document.getElementById("myInput").value = "";
            }
        }
    </script>
</head>
<body>
    <select name="ddlContent" id="ddlContent" onchange="SelectedTextValue(this)">
        <option value="Nothing">select</option>
        <option value="1">John Hammond</option>
        <option value="2">Mudassar Khan</option>
        <option value="3">Suzanne Mathews</option>
        <option value="4">Robert Schidner</option>
    </select>
    <input type="text" id="myInput" />
    <input type="button" value="Search" onclick="myFunction()" />
    <table id="myTable">
        <tr>
            <th>Name</th>
            <th>Country</th>
        </tr>
        <tr>
            <td>John Hammond</td>
            <td>United States</td>
        </tr>
        <tr>
            <td>Mudassar Khan</td>
            <td>India</td>
        </tr>
        <tr>
            <td>Suzanne Mathews</td>
            <td>France</td>
        </tr>
        <tr>
            <td>Robert Schidner</td>
            <td>Russia</td>
        </tr>
    </table>
</body>
</html>

Demo

Filter (Search) HTML Table based on TextBox value on Button Click in JavaScript

Company

Explore

Follow us

Contact Us