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>

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

Answer 1

尝试替换

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

使用

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

这应该可以让您按歌曲名称或歌手进行搜索。

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

我会说，尽管此方法适用于小型数据集（即，当您正在学习/测试时），但您会很快发现，在数据库中维护此“歌曲/歌手”列表将更加简单（取决于您总共将拥有多少条记录将帮助您确定最适合哪种数据库，但是某些数据库比某些“数据”更易于使用。）

那应该可以帮助您。如果您需要其他帮助，则需要显示更多代码/数据（例如，如何解决要寻求帮助的问题）。

编码愉快！

如何在HTML表格中搜索数据

1 个答案: