时间戳

首页 > 解决方案 > HTML e JAVASCRIPT 表扫描

javascript - HTML e JAVASCRIPT 表扫描

问题描述

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

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

标签： javascripthtmlperformancehtml-table

解决方案

您可以做几件事来提高性能...

  • 当您使用的文本不包含 HTML 时不要使用.innerHTML，因为每次您使用它时浏览器都会使用 HTML 解析器。要获取/设置不包含 HTML 的文本，请使用.textContent. 在 JQuery 中，类似的方法是.html()和.text()。
  • 不要在 DOM 中扫描您之前已经扫描过的元素。这意味着在重复调用的函数之外对 DOM 对象进行缓存变量引用。
  • 而不是手动循环遍历每一行和单元格，并且由于您使用的是 JQuery，只需将所有行放入 JQuery 包装集并使用该集合即可。将JQuery .find()方法与JQuery:contains选择器一起使用。

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

推荐阅读