Question

我试图在一张大桌子上实现预先搜索/过滤（1000多行100多列）。

Codepen链接 - ＆gt; https://codepen.io/davidatthepark/pen/KmYPEv?editors=1010（只能容纳600行和60列）。

当我输入数字并快速删除时，我注意到了一些延迟。有没有更有效的方法来做到这一点？同事建议使用数组或对象模拟dom，操纵它然后使用新状态渲染dom（听起来类似于反应）。

JavaScript代码：

＆＃13;

document.getElementById('search').addEventListener('keyup', search);

function search() {
  var rows = document.getElementsByTagName('tr');
  var searchString = this.value.replace(/ +/g, ' ').toLowerCase();
  var i;

  for (i = 0; i< rows.length; i++) {
    if (rows[i].textContent.replace(/ +/g, ' ').toLowerCase().indexOf(searchString) > -1) {
      rows[i].classList.remove('hide');
    } else {
      rows[i].classList.add('hide');
    }
  }
}

＆＃13;

Answer 1

您为每个按键操作在每一行上执行正则表达式和字符串操作。只需先缓存数据，然后搜索缓存：

Updated fiddle

document.getElementById('search').addEventListener('keyup', search);

var rows = document.getElementsByTagName('tr');
// build up cache
var rowCache = new Array(rows.length)
for (var i = 0; i < rows.length; i++) {
  rowCache[i] = rows[i].textContent.replace(/ +/g, ' ').toLowerCase();
}

function search() {
  var start = Date.now();
  var searchString = this.value.replace(/ +/g, ' ').toLowerCase();
  var i;

  for (i = 0; i< rows.length; i++) {
    if (rowCache[i].indexOf(searchString) > -1) {
      rows[i].classList.remove('hide');
    } else {
      rows[i].classList.add('hide');
    }
  }

  document.getElementById('speed').value = Date.now() - start;
}

这对我来说要快得多。

更快的预先搜索表行

1 个答案: