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

如果在输入框中未输入任何内容（长度为零或空字符串），则需要再次显示表格中的所有单元格。这是fiddle。

并更新功能：

＆＃13;

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";
            }
        });

    }
});

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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";
      }
    });
  }

});

＆＃13;

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

＆＃13;

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';
            }
        });
}

HTML表搜索单个单元格

3 个答案: