如何用rowspan隐藏行

问题描述

我在开始和结束列中有一个 rowspan 的表。布局是：

I have a table with rowspan at starting and ending column. Layout is:

<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代码是：

and the jquery code is:

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

预计会同时隐藏row1和row2，因为两行只有一个chekbox（ rowspan），但它没有发生。它只隐藏row1。

It will be expected to hide the row1 and row2 simultaneously as there is only one chekbox for both row (rowspan), but it is not happening. It is only hiding row1.

如何解决？

推荐答案

你可以检查下一行是否有较少的行 - 如果它是行波，那么你可以隐藏它：

You could do a check to see if the next row has less rows - if it does it is a rowspan so you can hide it:

$("#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();
    }
});

修改

As每条评论 - 任何列中任意数量的rowpans的解决方案：

As per comment - solution for any amount of rowspans in any column:

$("#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();
            }
        }
    });
});

这篇关于如何用rowspan隐藏行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！