1

但是，我有一个与此结构类似的 HTML 表：

  • 行跨度不是固定大小
  • 给定表中可以有多个行跨度（每个可以有不同的长度）
  • 该表已生成

JSFiddle

<table border="0" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td>
                <label for="searchbox">Search:</label>
                <input type="text" id="filter1" />
            </td>
        </tr>

    </tbody>
</table>
<table id="foo" border="1px">
    <tr> 
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
    </tr>
    <tbody id="data">
    <tr>
        <td class="col1" rowspan="2">1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr> 
     <tr>
        <td class="col1">v</td>
        <td>w</td>
        <td>x</td>
        <td>y</td>
        <td>z</td>
    </tr>
</table>

使用第一列完成搜索。使用下面描述的搜索/过滤功能时，我遇到了行跨度问题：

<script language="javascript" type="text/javascript">
    $(function() {    
     $('#filter1').change(function() { 
     $("#foo td.col1:contains('" + $(this).val() + "')").parent().show();
     $("#foo td.col1:not(:contains('" + $(this).val() + "'))").parent().hide();
     }); 
  });
</script>

问题是当输入将隐藏所有行的搜索词时'1'（例如搜索'v'） - 只有行跨度的第一行被隐藏，而行跨度的所有后续行部分仍然存在。所以行 [6,7,8,9] 将永远保留。

示例表：

[1 - 2,3,4,5]
[  - 6,7,8,9]
[v - w,x,y,z]

搜索“ 1 ”（正确）：

[1 - 2,3,4,5]
[  - 6,7,8,9]

搜索“ v ”（不正确）：

[  - 6,7,8,9]  <- this row should not be returned 
[v - w,x,y,z]

如何正确隐藏这些子行跨度？

更新： 我认为解决方案在于根据行数添加不同的类，然后使用适当数量的 .parent().next(i).hide() 以不同方式处理这些类的函数 - 尽管我不是确定如何做到这一点以及这种方法是否正确。

4

1 回答 1

3

Rowspanedtd不是tr它们似乎属于的所有元素的子元素。DOM 树中的所有元素可能只有一个直接父级，在您的情况下，它是trHTML 中显示的直接父级。

考虑到这一点，我建议您使用divs 或此类来进行设计，这将使您可以更自然地进行此类操作。

无论如何，无需更改您的 HTML，您可以对行索引及其rowspan属性进行一些补偿，检查它是否有用：

$(function() {
    $('#filter1').change(function() {
        var toShow = $("#data td.col1:contains('" + $(this).val() + "')");
        $("#data tr").not( $('#data tr').has(toShow) ).hide();
        toShow.each(function() {
            var rspan = $(this).attr('rowspan'),
                father = $(this).parent();
            if (rspan && +rspan > 1) {
                father.nextUntil(':nth-child(' + (father.index() + (+rspan) + 1) + ')').andSelf().show();
            } else father.show();
        });
    });
});

小提琴

于 2012-11-13T17:02:11.287 回答