Question

我在HTML页面中有一个非常大的表格，我创建了一个文本输入，仅显示表格的匹配行。这是我的代码：

<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>

问题是：
当我在输入字段中输入单个字符时，它会等待很长时间是否有更快的重写模式？

Answer 1

您可以采取以下措施来改善效果......

当您使用的文字没有时，请不要使用.innerHTML 包含HTML，因为浏览器每次都会使用HTML解析器你用这个。要获取/设置不包含HTML的文本，使用.textContent。在JQuery中，类似的方法是.html()和.text()。
请勿扫描DOM以查找您已扫描过的元素先前。这意味着对DOM进行缓存变量引用重复调用函数之外的对象。
而不是手动遍历每一行和单元格，并且因为您正在使用 JQuery，只需将所有行放入JQuery包装集中即可使用那个集合。将 JQuery .find() method 与 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 (i.e. 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

谢天谢地，我找到了解决方案：

<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表扫描

2 个答案: