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

当输入框中没有输入任何内容(长度为零或空字符串)时，您需要使表格中的所有单元格再次可见。这是一个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>