Jquery 如何使用rowspan隐藏行

我有一个表格，在起始列和结束列都有

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>

由于两行（rowspan）只有一个复选框，因此预计将同时隐藏行1和行2，但这不会发生。它只是隐藏第1行

如何解决?

---

我使用

.next（）

选择下一个应该隐藏的tr

您可以检查下一行的行数是否较少-如果是，则是一行span，以便隐藏它：

$("#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”）。在（“单击”，函数（）{
var row=$（“#结果>表格”）.find（'input:checkbox:checked'）.closest（'tr'），
rowspan=row.next（）；
row.toggle（）；
if（rowspan.children（）.length

编辑

根据注释-任何列中任意数量行间距的解决方案：

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

$（“#btn”）。在（“单击”，函数（）{
$（'#result>table'）。查找（'input:checkbox:checked'）。最近（'tr'）。每个（函数（）{
var行=$（此），
columns=row.children（'td[rowspan]'），
rowsToSpan=0；
row.toggle（）；
if（columns.length）{
columns.each（函数（）{
var thisRowSpan=parseInt（$（this.attr（'rowspan'））；
如果（thisRowSpan>rowsToSpan）{
rowsToSpan=此rowspan；
}
});
var nextRow=row.next（）；
对于（变量i=1；i

编辑： 让我们缩短时间，针对每种情况：

$（“#btn”）。在（“单击”，函数（）{
$（“#结果>表格”）.find（'input:checkbox:checked'）.each（函数（）{
//让我们获取每一行及其rowspan值
var thistr=$（this.closest（'tr'）；
var howmount=thistr.find（'td[rowspan]'））.attr（'rowspan'）；
if（typeof（howmount）=='undefined'）{howmount=1；}
//循环和切换
对于（var i=0；iIt仅在有三行时有效，但如果有四行，则如果选中第3行中的复选框，则第3行和第4行将被隐藏。请看此提琴：感谢您的努力。但是@Pete使用更少的代码和复杂性完成了此操作。请看上面的Pete解决方案。无论如何，我也对您的答案投了赞成票。抱歉，尽管起初我认为@Pete的解决方案是最好的，因为复杂性较低，但后来我发现您的解决方案是最好的。这是因为您的代码可以找到2行或更多行（最多不限行数），Pete的解决方案是否只能处理一行（两行链接）。我认为你的解决方案是最好的。我也接受了你的答案。谢谢你的投票。我刚刚编辑了我的帖子：接受的答案不适用于多行间距，因为没有检查“隐藏按钮”价值在下一行…谢谢，我希望它也能帮助其他人，这是一个有趣的question@AbdullahMamun-Ur Rashid-这不适用于没有rowspan的列：-更新的小提琴只起作用，因为最后一个单元格上有一个错误的rowspan如果rowspan是两行，那么代码将起作用，但是如果rowspan是3行呢或者更多行？在这种情况下，Yow是最好的。无论如何，也要感谢你。我将更新一个fiddle-rowspan属性是否总是在第一列上？不，它可能在任何列上column@AbdullahMamun-Ur Rashid更新了答案-仅当复选框行上的行跨度为正确数字时，您选择的答案才有效：请参见此示例：Don't kno为什么@Yow的解决方案现在不起作用。但当时我在有/没有rowspan的两行上都检查了他的代码。无论如何，我只是把我的接受从Yow转移到了你身上。你们两个都很棒！
$("#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();
            }
        }
    });
});

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

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