Question

我正在尝试搜索表格的内容。以下代码适用于不具有rowpan的行上的Filter。但是，如果我搜索合并行的内容，则不会得到预期的输出。

./scriptName

JSFIDDLE

正在搜索关键字“ Island Trading”，但搜索到“ Berglunds snabbkop”却给出了错误的输出。

对此的任何帮助都会非常有帮助。

Answer 1

在有行距的地方添加一个隐藏的<td>：

<tr>
    <td style="display:none;">Alfreds Futterkiste</td>
    <td>Berglunds snabbkop</td>
</tr>

更新的小提琴：https://jsfiddle.net/0j3defzs/2/

发生这种情况的原因是该函数正在表的第一列中进行搜索，但是跨行会使一些行显示在上一行（而不是下一行）的旁边。插入空的td可确保过滤功能永远不会在错误的列中搜索。

编辑：

我认为如果该表实际上每行有两列，那会更有意义，但是如果我们根本不想更改该表，那么类似的事情也可能起作用（提琴：https://jsfiddle.net/m6cbzrh9/1/）< / p>

function myFunction() {
    var input, filter, table, tr, td, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    var show = true;
    var spannedRows = 0;
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if(spannedRows > 0) {
            if(show)
                tr[i].style.display = "";
            else
                tr[i].style.display = "none";
            spannedRows--;
        } else if (td) {
            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
            let rs = td.getAttribute("rowspan");
            console.log("rs = " + rs);
            if(rs && rs > 1) {
                show = td.innerHTML.toUpperCase().indexOf(filter) > -1;
                spannedRows = rs - 1;
            }
        }
    }
}

这是假定行跨度始终在多行列的第一个单元格中定义，然后根据该第一个单元格的结果过滤所有这些行。

合并行中的过滤器/搜索表

1 个答案: