HTML e JAVASCRIPT table scan

Question

I've a very big table in a HTML page and I create a text input for show only the matching row of the table. This is my code:

<input type="text" id="myInput" oninput="myFunction()">
<table id="tabella">
<tr><th>TIPO</th><th>SCHEMA</th><th>NOME</th><th>DDL</th></tr>
<tr><td>[...]</td></tr>
[...] > 10000 rows
</table>

<script>
function myFunction() {
    var x = document.getElementById("myInput").value;
    document.getElementById("demo").innerHTML = "You wrote: " + x;

    var table = document.getElementById('tabella');

    for (var i = 0, row; row = table.rows[i]; i++) 
    {   
        for (var j = 0, col; col = row.cells[j]; j++) 
        {
            $(row).hide();
        }
    }

    for (var i = 0, row; row = table.rows[i]; i++) 
    {

        if ( row.cells[2].innerHTML.includes(x)  )
        {
            $(row).show();
        }   
    }   
}
</script>

The problem is:
When I type a single character in the input field it waits for a very long time Is there a mode for rewrite that is faster?

Answer 1

There are several things you can do to improve the performance...

Don't use .innerHTML when the text you are working with doesn't contain HTML because the browser engages the HTML parser every time you use this. For getting/setting text that does not contain HTML, use .textContent . In JQuery, the analogous methods are .html() and .text() .
Don't scan the DOM for elements that you've already scanned for previously. This means make cached variable references to your DOM objects outside of your repeatedly called functions.
Rather than looping over every row and cell manually, and since you are using JQuery, just get all the rows into a JQuery wrapped set and work with that collection. Use the JQuery .find() method with the JQuery :contains selector .

 <!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style> #demo { margin-top:1em; padding:3px; width:20%; font-weight:bold; border:1px solid #aa0; background:#ee3; height:1em; } </style> </head> <body> <input type="text" id="myInput"> <table id="tabella"> <thead> <tr> <th>TIPO</th> <th>SCHEMA</th> <th>NOME</th> <th>DDL</th> </tr> </thead> <tr> <td>row 1, cell 1</td> <td>row 1, cell 21</td> <td>row 1, cell 3</td> <td>row 1, cell 4</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 21</td> <td>row 2, cell 3</td> <td>row 2, cell 4</td> </tr> <tr> <td>row 3, cell 1</td> <td>row 3, cell 21</td> <td>row 3, cell 3</td> <td>row 3, cell 4</td> </tr> <tr> <td>row 4, cell 1</td> <td>row 4, cell 21</td> <td>row 4, cell 3</td> <td>row 4, cell 4</td> </tr> </table> <div id="demo"></div> <script> // Get your DOM references outside of the callback function // so that you aren't scanning the DOM over and over for the // same elements. let $tbl = $("#tabella"); let $dem = $("#demo"); // Don't use inline HTML event handlers (ie oninput). // Do all of yor JavaScript outside of the HTML $("#myInput").on("input", myFunction); function myFunction() { // Hide all the rows in the table, except the header row // (<tbody> is implicitly created) $("tbody > tr",$tbl).hide(); // Then, find the row(s) that contain the entered text and show only them. let $found = $tbl.find("tbody > tr:contains('" + this.value + "')").show(); // Don't use .innerHTML for non-HTML strings, use .textContent instead. // In JQuery, that's .text() instead of .html() $dem.text($found.length + " records found."); } </script> </body> </html>

Answer 2

Thank guys I found the solution:

<script>
var $rows = $('#tabella tr');
$('#myInput').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});
</script>

HTML e JAVASCRIPT table scan

Question

2 answers

solution1
1 ACCPTED 2018-05-25 14:40:40

solution2
-1 2018-05-25 14:36:10

HTML e JAVASCRIPT table scan

Question

2 answers

solution1 1 ACCPTED 2018-05-25 14:40:40

solution2 -1 2018-05-25 14:36:10

solution1
1 ACCPTED 2018-05-25 14:40:40

solution2
-1 2018-05-25 14:36:10