Question

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

rowspans的大小不固定
在给定的表格中可以有多个rowpans（每个行都可以有不同的长度）
生成表格

<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>

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

<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'） - 只有第一行rowspan被隐藏，而所有后续行的部分行仍然存在。因此行[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]

如何正确隐藏这些子行扫描？

更新我认为解决方案在于根据rowspan计数添加不同的类，然后有一个函数以不同的方式处理这些类，并使用适当数量的.parent（）。next（i）.hide（） - 虽然我不知道如何这样做以及这种方法是否正确。

Answer 1

Rowspan ed td s不是他们似乎属于的所有tr元素的子代。 DOM树中的所有元素可能只有一个直接父元素，在您的情况下，它是HTML中显示的直接tr父元素。

考虑到这一点，我建议您使用div s等设计，这样您就可以更自然地进行此类操作。

无论如何，无需更改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();
        });
    });
});

Fiddle

JQuery - 搜索HTML表 - rowspan问题

1 个答案: