如何在 HTML 表格中搜索数据

Question

我在该表中创建了一个表，我将显示一个表，我将为用户添加一个搜索选项，因为如果用户搜索表中的任何数据，它将显示，但在我有的表中存在一个问题创建了 3 行，因为我只能搜索第一行。

    <table style="width:100%" id="table">
  <tr>
    <td><a href="#">Song Name</a></td>
    <td>Artists</td>
    <td><a href="#" download><img src="images/download.png" alt="Download" width="30" height="30">
</a></td>
  </tr>
</table>
<script>
function myFunction() {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("search");
    filter = input.value.toUpperCase();
    ul = document.getElementById("table");
    li = ul.getElementsByTagName("tr");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("td")[0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        }
        else {
            li[i].style.display = "none";
        }
    }

}

        </script>    

这是我的代码，我只能按歌曲名称搜索。 但是我想用艺术家姓名搜索我不知道我错在哪里。 并且如果用户没有找到任何数据，那么它会显示“未找到”，任何人都可以帮助我。

Answer 1

尝试更换

 a = li[i].getElementsByTagName("td")[0];

和

 a = li[i].getElementsByTagName("td")[i];

这应该允许您按歌曲名称或艺术家进行搜索。

您没有显示多行的位置/方式，但您需要添加另一个循环来查看多行。

我会说，虽然这种方法适用于小数据集（即，当你正在学习/测试时），你会很快发现在数据库中维护这个“歌曲/艺术​​家”列表会简单得多（取决于有多少记录）您总共将有助于确定哪种数据库最适合，但某些数据库比仅使用某些“数据”更容易使用）。

那应该对你有帮助。 如果您需要额外的帮助，您将需要显示更多的代码/数据（即，您如何解决您寻求帮助的问题）。

快乐编码！