修改JavaScript代码实现表格多列搜索功能

当前你的JavaScript代码仅支持搜索表格的第二列（通过[1]指定），以下是修改后的代码，可实现指定多列搜索——只要输入内容匹配指定列中的任意一列，该行就会保留显示。

修改后的JavaScript代码 #

function search() {
    var input, filter, table, tr, td, i, j, textValue, matchFound;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    
    // 定义要搜索的列索引（从0开始计数，对应表格列的顺序）
    // 示例：搜索Názov(1)、Autor(2)、Tagy(3)、Žáner(4)列，可按需增删索引
    const columnsToSearch = [1, 2, 3, 4];

    for (i = 0; i < tr.length; i++) {
        matchFound = false;
        // 遍历所有指定的搜索列
        for (j = 0; j < columnsToSearch.length; j++) {
            const colIndex = columnsToSearch[j];
            td = tr[i].getElementsByTagName("td")[colIndex];
            if (td) {
                textValue = td.textContent || td.innerText;
                // 只要有一列匹配，标记为找到并跳出当前行的列循环
                if (textValue.toUpperCase().indexOf(filter) > -1) {
                    matchFound = true;
                    break;
                }
            }
        }
        // 根据匹配结果设置行的显示状态
        tr[i].style.display = matchFound ? "" : "none";
    }
}

核心修改说明 #

• 可配置搜索列：通过columnsToSearch数组指定目标列的索引（索引从0开始，比如表格第二列对应索引1），你可以根据需求自由添加或移除列索引
• 多列匹配逻辑：对每一行遍历所有指定列，只要任意一列的内容包含搜索关键词，就保留显示该行
• 效率优化：一旦找到匹配列就跳出当前行的列循环，避免不必要的遍历操作

你的HTML搜索输入框和PHP生成的表格代码无需修改，保持原样即可正常工作。

内容的提问来源于stack exchange，提问作者Petco