How can find numbers in html table with using search/filter?

Question

 function searchFunction(){ let tabel, filter, input, tr, td, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); tabel = document.getElementById("myTable"); tr = document.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; if (td) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } }

 .search_input { background-image: url(search_icon.png); background-position: 3px 9px; background-repeat: no-repeat; background-size: 12px 12px; width: 15%; height: 31px; padding: 12px 8px 9px 26px; border: 1px solid #ddd; margin: 12px 0 12px 0; border-radius: 7px; } .my_tabel { border-collapse: collapse; width: 100%; border: 1px solid #ddd; font-size: 13px; } .my_tabel th, .my_tabel td { text-align: left; padding: 12px; } .my_tabeltr { border-bottom: 1px solid #ddd; } #myTable tr.header, #myTable tr:hover { background-color: #f1f1f1; } table, .line{ border: 1px solid; } thead { background-color: #93B6D2; }

 <!DOCTYPE html> <html> <head> <title>Assingment 3</title> <link rel="stylesheet" href="js-assingment.css" type="text/css"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <script src="js_module.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <form name="searching_tabel" id="searching_tabel"> <div class="container"> <span>Search</span> <input type="text" id="myInput" onkeyup="searchFunction()" class="search_input"> <table class="table table-bordered my_tabel" id="myTable"> <thead> <tr> <th>#</th> <th>Name</th> <th>Email</th> <th>Date</th> <th>Courses</th> <th>UserGuid</th> <th>License</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark Scheid</td> <td>mscgei@wgu.edu</td> <td>06-jan-15</td> <td>PK0-003-Project+</td> <td>03ocb</td> <td>Course</td> </tr> <tr> <th scope="row">2</th> <td>Kenneth Nagle</td> <td>knagle@wgu.edu</td> <td>06-jan-15</td> <td>N10-005 CompTIA Network+</td> <td>02Oki</td> <td>Course</td> </tr> <tr> <th scope="row">3</th> <td>Kenneth</td> <td>matt.bearce@verizonwireless.com</td> <td>06-jan-15</td> <td>Pearson-220-802-complete-Pearson CompTIA: A+ 220-802(Course & Lab)</td> <td>030c8</td> <td>Course</td> </tr> <tr> <th scope="row">4</th> <td>Rafael Moreno</td> <td>rmoren4@wgu.edu</td> <td>06-jan-15</td> <td>N10-005 CompTIA Network+</td> <td>030c7</td> <td>Course</td> </tr> <tr> <th scope="row">5</th> <td>Paul Doyle</td> <td>doylepaul@gmail.com</td> <td>06-jan-15</td> <td>Pearson-220-802-complete-Pearson CompTIA: A+ 220-801(Course & Lab)</td> <td>030c6</td> <td>Course</td> </tr> <tr> <th scope="row">6</th> <td>Paul Doyle</td> <td>esmally@gmail.com</td> <td>06-jan-15</td> <td>Pearson-220-802-complete-Pearson CompTIA: A+ 220-801(Course & Lab)</td> <td>030bb</td> <td>Course</td> </tr> </tbody> </table> </div> </form> </body> </html>

I created a search/filter in html table. When I write a related alphabet in search input, it searches and shows information. But when I write a numbers in my search, no result are found.

Answer 1

As others mention you can use Jquery Datatable which offers a lot of in-built functionalities.

But if you still want to use pure javascript then use the below function to search through all the columns.

function searchFunction() {
    let tabel, filter, input, tr, td, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    tabel = document.getElementById("myTable");
    tr = document.getElementsByTagName("tr");
    for (i = 1; i < tr.length; i++) {
        if (tr[i].textContent.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }
    }
}

Also add onsubmit="return false;" to the form tag, so that the page doesn't reload when enter is pressed.

How can find numbers in html table with using search/filter?

Question

1 answers

solution1
1 2017-07-22 18:27:01

How can find numbers in html table with using search/filter?

Question

1 answers

solution1 1 2017-07-22 18:27:01

solution1
1 2017-07-22 18:27:01