在经过筛选的表格上进行表格搜索?

时间:2018-07-30 13:47:26

标签: search filter html-table dropdown tablefilter

我有一个搜索功能,可以搜索3列的表格。我现在实现了一个下拉列表,该下拉列表根据位置过滤表格,但是当使用搜索功能时,它将搜索整个表格,而不是下拉列表中剩余的项目。以下是我过滤表格的功能,但是我可以根据显示的内容而不是表格整体上的内容添加任何内容吗?

使用HTML + JS

    function filterTable(event) {
    var filter = event.target.value;
    var rows = document.querySelector("#rosterTable tbody").rows;

    for (var i = 0; i < rows.length; i++) {
        var firstCol = rows[i].cells[0].textContent;
        var fourthCol = rows[i].cells[3].textContent;
        var fifthCol = rows[i].cells[4].textContent;

        if (firstCol.indexOf(filter) > -1 || fourthCol.indexOf(filter) > -1 || fifthCol.indexOf(filter) > -1) {
            rows[i].style.display = "";
        } else {
            rows[i].style.display = "none";
        }
    }
}
document.querySelector('#myInput').addEventListener('keyup', filterTable, false);

0 个答案:

没有答案