搜索HTMLtable

Question

如何使用js实时搜索html表中的某个字符串，并将结果显示为4行.Google解决方案到目前为止还没有成功。

我有一个可行的解决方案，但我不能让它以4行的方式工作。 这就是我到目前为止所做的：

function doSearch() {
  var q = document.getElementById("q");
  var v = q.value.toLowerCase();
  var rows = document.getElementsByTagName("tr");
  var on = 0;
  for ( var i = 0; i < rows.length; i++ ) {
    var fullname = rows[i].getElementsByTagName("td");
    fullname = fullname[0].innerHTML.toLowerCase();
    if ( fullname ) {
        if (fullname.indexOf(v)!= -1) {
        rows[i].style.display = "";
        on++;
      } else {
        rows[i].style.display = "none";
      }
    }
  }

Answer 1

从HTML / php代码看，您的表格似乎包含行（<tr>），每行有4个项目（<td>）。

您问题中的javascript代码仅检查每行上的第一项，以检查用户何时输入一些搜索查询。如果搜索字词不在该单元格中（<td＆gt;）则会隐藏整行（所有4个项目）。

如果我正确理解您的问题，您正在寻找一种基于搜索查询隐藏单个项目的解决方案，并以每行4个显示所有其他项目。

由于原始表格结构中每行已有4行，因此这不是最有效的解决方案。如果您在一行中隐藏了一个项目，则需要将所有其他项目从一行重新排列到另一行。

我建议更改您的php / HTML以简单地呈现项目列表。不在HTML代码中按每4行分组。简单的UL和LI项目列表。

添加样式（css flexbox将是我的选择），以确保项目列表始终整齐地呈现在每行4个项目中（无论是否已过滤）。