HTML表格搜索单个单元格

Question

我一直在寻找用于搜索表格并显示单个单元格的代码。一直在尝试自己做，最终找到了一个除了一件事之外完美的作品。当搜索栏被清空时，它会显示第一个单元格，我不知道如何制作它，所以它会返回显示整个表格。

这是代码，非常感谢任何帮助。

    var cells = document.querySelectorAll("#myTable td");
    var search = document.getElementById("myInput");

    search.addEventListener("keyup", function() {

        for (var i = 0; i < cells.length; ++i) {
            if (cells[i].textContent.toLowerCase().indexOf(search.value.toLowerCase()) === 0) {
                cells.forEach(function(element) {
                    element.style.display = "none";
                });
                cells[i].style.display = "table-cell";
                break;
            } else {
                cells.forEach(function(element) {
                    if (cells[i] !== element) {
                        element.style.display = "table-cell";
                    }
                });
            }
        }

    });

<input id="myInput">
<table id="myTable">
    <tr>
        <td>asd</td>
        <td>dsa</td>
    </tr>
    <tr>
        <td>123</td>
        <td>321</td>
    </tr>
    <tr>
        <td>412</td>
        <td>124</td>
    </tr>
</table>

这是正在运行的代码，您可以看到我的问题是：https://jsfiddle.net/y1wof1go/

Answer 1

因此，为了确保表在搜索为空时返回其默认状态，请添加一个 if 语句检查搜索栏是否为空。如果该栏为空，则将所有表格元素设置回以正常的table-cell 样式显示。

var cells = document.querySelectorAll("#myTable td");
var search = document.getElementById("myInput");

search.addEventListener("keyup", function() {

  for (var i = 0; i < cells.length; ++i) {
    if (cells[i].textContent.toLowerCase().indexOf(search.value.toLowerCase()) === 0) {
      cells.forEach(function(element) {
        element.style.display = "none";
      });
      cells[i].style.display = "table-cell";
      break;
    } else {
      cells.forEach(function(element) {
        if (cells[i] !== element) {
          element.style.display = "table-cell";
        }
      });
    }
  }
  if (search.value == "") {
    cells.forEach(function(element) {
      if (cells[i] !== element) {
        element.style.display = "table-cell";
      }
    });
  }

});

<input id="myInput">
<table id="myTable">

  <tr>
    <td>asd</td>
    <td>dsa</td>
  </tr>

  <tr>
    <td>123</td>
    <td>321</td>
  </tr>

  <tr>
    <td>412</td>
    <td>124</td>
  </tr>

</table>

Answer 2

当输入框中没有输入任何内容（长度为零或空字符串）时，您需要使表格中的所有单元格再次可见。 这是fiddle。

及更新功能：

var cells = document.querySelectorAll("#myTable td");
var search = document.getElementById("myInput");

search.addEventListener("keyup", function() {
    if (search.value.length > 0 && search.value != '') {
        for (var i = 0; i < cells.length; ++i) {
            if (cells[i].textContent.toLowerCase().indexOf(search.value.toLowerCase()) === 0) {
                cells.forEach(function(element) {
                    element.style.display = "none";
                });
                cells[i].style.display = "table-cell";
                break;
            } else {
                cells.forEach(function(element) {
                    if (cells[i] !== element) {
                        element.style.display = "table-cell";
                    }
                });
            }
        }
    } else {
        cells.forEach(function(element) {
            if (cells[i] !== element) {
                element.style.display = "table-cell";
            }
        });

    }
});

<input id="myInput">
<table id="myTable">
    <tr>
        <td>asd</td>
        <td>dsa</td>
    </tr>
    <tr>
        <td>123</td>
        <td>321</td>
    </tr>
    <tr>
        <td>412</td>
        <td>124</td>
    </tr>
</table>

Answer 3

当您需要重置任何平台上的所有项目时，通常最好执行一揽子重置为原始状态：

search.addEventListener('keyup', function()
{
    if (search.value.length > 0 && search.value != '')
    {
        for (var i = 0; i < cells.length; ++i)
        {
            if(cells[i].textContent.toLowerCase().indexOf(search.value.toLowerCase()) === 0)
            {
                cells.forEach(function(element)
                {
                    element.style.display = 'none';
                });
                cells[i].style.display = 'table-cell';
                break;
            }
            else
            {
                cells.forEach(function(element)
                {
                    if (cells[i] !== element)
                    {
                        element.style.display = 'table-cell';
                    }
                });
            }
        }
    }
    else
    {
        cells.forEach(function(element)
        {
            if (cells[i] !== element)
            {
                element.style.display = 'table-cell';
            }
        });
}