Javascript jQuery：通过搜索输入隐藏表行，寻址td rowspan和colspan

我有一个包含多个行跨度和列跨度以及搜索输入的表。输入应仅显示与第一列匹配的行，并隐藏所有“子”行

当前，它仅隐藏第一行，而不是所有相关的子行。 如何隐藏所有行（子行数可变）？例如，如果我键入“foo”，则应仅显示带有“foo”的行

JSFiddle:

HTML:

---

我尝试了各种描述的方法，例如，在这里，但都没有成功：

我在下面列出了一个解决方案，我将尽力解释其中的每一个方面

修改

keyup

事件以隐藏每一行。我们可以将循环中的逻辑简化为“我应该显示这一行吗？”

大部分逻辑都围绕

rowspan

属性，因此我们将通过执行

$firstCell.attr（'rowspan'）获取该属性

棘手的一点。如果一行的行跨度为

2

，这意味着我们应该完全忽略下一行。如果它的行跨度为

3

，则表示忽略下一个

2

行。如果其行跨度为

n

，则忽略下一行

n-1

如果遇到

行span

，我们可以将该数字存储在循环之外。这样做允许我们确定顺序迭代是否是行跨度的“子代”

如果is是rowspan的子行，我们将通过执行

return true完全忽略该行在我们的循环中

如果不是rowspan的子行，我们将检查该行中的搜索文本

使用您的逻辑检查文本是否存在，如果该行包含文本，我们可以显示该行。然而，更进一步，我们还需要显示它的任何“子”行。请记住，一行的子行是下一行

行span-1

行

jQuery有一个方便的选择器，可以选择“下一个

n

元素”

如果我们的行有一个行span，我们需要选择下一个

行span-1

元素，这可以使用

：lt（行span-1）

完成，将它们添加到当前行中，并显示它们

//在表中搜索
$（“.table search”）.on（“keyup”，function（）{
var value=$（this.val（）.toLowerCase（），
tableattr=$（this）.attr（“数据表搜索”），
tablesearch=$（'#'+tableattr）.find（'tbody tr'）；
tablesearch.hide（）；//从隐藏所有行开始
var previousRowspan=1；//使用默认值1启动存储的rowspan
tablesearch.each（函数（）{
var$row=$（此）；
var$firstCell=$row.find（“td:first”）；
var id=$firstCell.text（）.toLowerCase（）；
var rowspan=$firstCell.attr（'rowspan'）；//获取行的rowspan
如果（previousRowspan>1）{//如果此行是子行
previousRowspan--；//减小rowspan
返回true；//不检查此行
}
previousRowspan=+rowspan；//此行不是子行。请更新我们的rowspan。
if（id.indexOf（value）>-1）{//如果找到文本
var additionalRows=previousRowspan-1；//使用我们的n-1公式
var$additionalRows=$row.nextAll（':lt（'+additionalRows+'）；//选择下一（n-1）行
$row.add（$additionalRows.show（）；//显示此行以及下一（n-1）行
}
});
});
td{
边框：1px实心#000；
}

数据表名
校长1
校长2
福
分解1
价值
价值
分解2
价值
价值
酒吧
分解1
价值
价值
分解2
价值
价值
您是将数据导入到表中，还是手动设置每一行？手动设置每一行@Keithas in:不动态生成表您试图实现的内容？例如，如果我键入“foo”，则应仅显示带有“foo”的行，包括该行的所有“disaggs”行@whoami！有一件事我不明白：如果你输入
disagg
，它仍然会显示行-有没有办法只搜索第一列（那些包含
Foo
和
Bar
）？嗯，这是我的疏忽。给我一分钟，我会纠正它。@toeftoeftoeff更新。
<table id='myTable'>
<thead>
    <tr>
        <td colspan="1" rowspan="1">
            <input type="text" placeholder="searchme" class='table-search' data-table-search="myTable"></input>
        </td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">tablename</td>
        <td colspan="1" rowspan="1">header1</td>
        <td colspan="1" rowspan="1">header2</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td colspan="1" rowspan="2">Foo </td>
        <td>disagg1</td>
        <td>value</td>
        <td>value</td>
    </tr>
    <tr>
        <td>disagg2</td>
        <td>value</td>
        <td>value</td>
    </tr>
    <tr>
        <td colspan="1" rowspan="2">Bar</td>
        <td>disagg1</td>
        <td>value</td>
        <td>value</td>      
    </tr>
    <tr>
        <td>disagg2</td>
        <td>value</td>
        <td>value</td>      
    </tr>
</tbody>
</table>

$(".table-search").on("keyup", function() {
    var value = $(this).val().toLowerCase(),
        tableattr = $(this).attr("data-table-search"),
        tablesearch = $('#'+tableattr).find('tbody tr')

    tablesearch.each(function() {
        $row = $(this);
        var id = $row.find("td:first").text().toLowerCase();
        if (id.indexOf(value) === -1) {
            $row.hide();
        }
        else {
            $row.show();
        }     
    });
});