如何隐藏带有rowspan的行

Question

如何隐藏带有rowspan的行

4

我有一张表格，起始列和结束列都设置了 rowspan 属性。布局如下：

<input type="button" id="btn" value="Hide" />
<div id="result">
<table>
    <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
            <th>Hide</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td rowspan="2">Col1</td>
        <td>col2</td>
        <td>col3</td>
        <td rowspan="2"><input type="checkbox" value="" /></td>
    </tr>
     <tr>
         <td>col2</td>
         <td>col3</td>
     </tr>
     <tr>
         <td>Col1</td>
         <td>col2</td>
         <td>col3</td>
         <td><input type="checkbox" value="" /></td>
    </tr>
    </tbody>
</table>
</div>

这段代码是jQuery代码：

$("#btn").on("click",function(){
    $('#result > table').find('input:checkbox:checked').closest('tr').toggle();
});

预期同时隐藏行1和行2，因为两行只有一个复选框（rowspan），但实际上只隐藏了行1。

该如何解决？

JSFIDDLE

- Abdullah Mamun-Ur- Rashid

1

http://jsfiddle.net/9rd7mhny/1/ - Paul Booblick

3个回答

1

$("#btn").on("click",function(){
$('#result > table').find('input:checkbox:checked').closest('tr').toggle();
    $('#result > table').find('input:checkbox:checked').closest('tr').next().toggle();
    
});

FIDDLE

我使用了.next()来选择下一个应该被隐藏的

- guradio

只有三行时才能正常工作，但如果有四行，则在第3行的复选框被选中时，第3行和第4行将被隐藏。请参见此fiddle：http://jsfiddle.net/infomamun/a191jffw/6/ - Abdullah Mamun-Ur- Rashid

1

编辑： 让我们把它缩短，并使其适用于每种情况：更新的JsFiddle

$("#btn").on("click",function(){
    $('#result > table').find('input:checkbox:checked').each(function() {

        // let's take each row, and its rowspan value
        var thistr = $(this).closest('tr');
        var howmuch = thistr.find('td[rowspan]').attr('rowspan');
        if(typeof(howmuch)==='undefined') {howmuch=1;}        
    
        // looping and toggling
        for(var i=0; i<howmuch; i++) {
            thistr.toggle();
            thistr=thistr.next();
        }
    });
});

旧文章：

这个更新的 JsFiddle 可以执行

你需要获取第一个父级 TR，然后根据它的 "rowspan" 值开始循环遍历相邻的 TR...

$("#btn").on("click",function(){
    var aa = $('#result > table').find('input:checkbox:checked').closest('td[rowspan]');
    var thetr=aa.closest('tr');

    for(var i=0; i<aa.attr('rowspan'); i++) {
        thetr.toggle();
        thetr=thetr.next();
    }
});

语法可能还有待完善，但你可以理解这个想法。

顺便说一句，它甚至可以在存在多个行合并的情况下工作，而这不是被接受的答案所能做到的，我想……？

- Yow

感谢您的努力。但是@Pete用更少的代码和复杂性完成了它。请查看Pete的上面的解决方案。无论如何，我也给了您的答案点赞。 - Abdullah Mamun-Ur- Rashid

谢谢，我希望它也能帮助到其他人，这是一个有趣的问题。 - Yow

你说得对，我刚刚修改了它，现在它的表现更好了，并且代码更短了。请参见上面更新的答案。 - Yow

新的更新也不起作用，因为它只会获取第一个rowspan属性并将其应用于所有切换 - 请参见此示例：http://jsfiddle.net/peteng/a191jffw/15/，尝试隐藏第一个和第二个复选框，您会看到它也隐藏了第三个，因为它正在使用第一行的rowspan属性在第二行上。 - Pete

@Pete：是的，忘记了each()函数。已经更正。 - Yow

显示剩余3条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pete · Accepted Answer

您可以检查下一行是否比当前行少 - 如果是，那么它就是rowspan，您可以将其隐藏：

$("#btn").on("click",function(){
    var row = $('#result > table').find('input:checkbox:checked').closest('tr'),
        rowspan = row.next();

    row.toggle();
    if (rowspan.children().length < row.children().length) {
        rowspan.toggle();
    }
});

更新的示例

编辑

根据评论 - 解决任何列中任意数量的行合并的问题:

$("#btn").on("click",function(){    
    $('#result > table').find('input:checkbox:checked').closest('tr').each(function() {
        var row = $(this),
            columns = row.children('td[rowspan]'),
            rowsToSpan = 0;

        row.toggle();

        if (columns.length) {
            columns.each(function() {
                var thisRowSpan = parseInt($(this).attr('rowspan'));
                if (thisRowSpan > rowsToSpan) {
                    rowsToSpan = thisRowSpan;
                }
            });

            var nextRow = row.next();
            for (var i = 1; i < rowsToSpan; i++) {
                nextRow.toggle();
                nextRow = nextRow.next();
            }
        }
    });
});

示例代码