如何选择与行跨度相对应的行？答案

【问题标题】：How do I select rows that correspond to a rowspan?如何选择与行跨度相对应的行？
【发布时间】：2014-08-31 00:43:20
【问题描述】：

我有一个动态生成的表，我试图更改其中某些行的背景颜色。有时有些行具有行跨度，我不知道如何获取与一个“行”相对应的所有行。我用谷歌搜索了我的大脑，发现这个 jsfiddle 非常接近我需要的东西（在逻辑意义上）

http://jsfiddle.net/DamianS1987/G2trb/

基本上我有这样的东西：

我希望能够像这样一次突出显示整行：

但我可以在 rowspan 行上实现的唯一突出显示是：

这是我的代码（与 jsfiddle 不同，但逻辑基本相同）

CSS：

.highlightedClass{
background-color: #AEAF93;
}

HTML：

<table border="1" class="altTable">
<th>ID</th>
<th>NAME</th>
<th>Miles</th>
<th>WORK</th>
<tbody>
    <tr>
        <td class="td_id">999B</td>
        <td class="td_name ">John</td>
        <td class="td_cumMiles">702.4</td>
        <td class="td_workEvent">Y</td>
    </tr><tr>
    <td class="td_id" rowspan="2">111A</td>
    <td class="td_name">Tom</td>
    <td class="td_cumMiles">446.5</td>
    <td class="td_workEvent">Y</td>
    </tr><tr>
    <td class="td_name">Becky</td>
    <td class="td_cumMiles">446.5</td>
    <td class="td_workEvent">A</td>
    </tr>
</tbody>

JAVASCRIPT：

for(var j=0; j < inspection.length; j++){
var $tr = $('<tr></tr>');
var $td_id = $('<td></td>').addClass('td_id').html(inspection.id);
$tr.append($td_id);
$table.append($tr);

$.each(inspection[i], function(index, value){
var $td_name, $td_miles,$td_workEvent;
if(index > 0){
    var $2nd_tr = $('<tr></tr>');

    $td_name = $('<td></td>').addClass('td_name').html(value.stationSt);
    $td_miles = $('<td></td>').addClass('td_miles').html(value.miles);
    $td_workEvent = $('<td></td>').addClass('td_workEvent').html(value.code);
    $2nd_tr.append($td_name);
    $2nd_tr.append($td_miles);
    $2nd_tr.append($td_workEvent);
    $table.append($2nd_tr);
    $td_id.attr('rowSpan',index+1);

    if($td_id.text() === content().id){
            $2nd_tr.addClass("highlightedClass");   
    }else{
        if($2nd_tr.hasClass("highlightedClass")){                    
            $2nd_tr.removeClass('highlightedClass');
        }
    }
    $('#workevent').on('click', function(){
            $tr.removeClass('highlightedClass');
    });
}else{
    $td_name = $('<td></td>').addClass('td_name').html(value.stationSt);
    $td_miles = $('<td></td>').addClass('td_miles').html(value.miles);
    $td_workEvent = $('<td></td>').addClass('td_workEvent').html(value.code);
    $tr.append($td_name);
    $tr.append($td_miles);
    $tr.append($td_workEvent);
    $table.append($tr); 

    if($td_id.text() === content().id){
        $tr.addClass("highlightedClass");
    }else{                              
        if($tr.hasClass("highlightedClass")){
            $tr.removeClass('highlightedClass');
        }
    }           
    $('#workevent').on('click', function(){
        $tr.removeClass('highlightedClass');            
    });  
}   
});

【问题讨论】：

您需要在选定的tds 中查找任何rowspan= 属性，如果存在，还要选择后续行。
花了很多时间，但它适用于所有情况。答案更新如下。享受:)

标签： javascript jquery css html-table

【解决方案1】：

您需要在选定的tds 中查找任何rowspan= 属性，如果存在，还要选择后续行。此示例应支持任何行跨值（它根据行跨计数附加后续行）：

最终版本：JSFiddle：http://jsfiddle.net/TrueBlueAussie/G2trb/22/

$('td').bind('click', function () {
    var $row = $(this).closest('tr');

    // What row index is the clicked row?
    var row = $row.index(); // Subtract heading row

    // Does the clicked row overlap anything following?
    var rowspan = ~~$row.find('td[rowspan]').attr('rowspan') || 0;

    // Get all rows except the heading, up to the last overlapped row
    var $rows = $row.parent().children().slice(1, row + rowspan);
    row--; // Subtract the heading row we excluded

    // Now see if any preceding rows overlap the clicked row
    $rows.each(function (i) {
        var $tr = $(this);

        // Only check first rowspan of a row
        var rowspan = ~~$tr.find('td[rowspan]').attr('rowspan') || 0;

        // If the rowspan is before the clicked row but overlaps it
        // Or it is a row we included after the selection
        if ((i < row && ((rowspan + i) > row)) || i > row) {
            $row = $row.add($tr);
        }
    });
    $row.toggleClass('green');
});

第一次尝试 JSFiddle：http://jsfiddle.net/TrueBlueAussie/G2trb/18/

$('td').bind('click', function () {
    var $td = $(this);
    var $row = $td.closest('tr');
    var $tds = $row.find('td');
    $tds.each(function(){
        var rowspan = ~~$(this).attr('rowspan');
        while (--rowspan > 0){
            $row = $row.add($row.next());
        }
    });
    $row.toggleClass('green');
});

需要针对位于前一个行跨度下的子行进行调整，但我也在努力解决这个问题。

注意事项：

~~ 是将字符串转换为整数的快捷方式。
|| 0 将未定义的值转换为 0。
$row = $row.add($tr) 正在将行元素附加到 jQuery 集合/对象。

【讨论】：

你太棒了，伙计！感谢您提供详细信息、注释和小提琴。很好的帮助。
@user2847749：很高兴你喜欢。这是一个有趣的练习:)

【解决方案2】：

在解决我的问题（摆脱 TrueBlueAussie 给我的）时，我想出了以下解决方案。

CSS：

.highlightedClass{
background-color: #AEAF93;
}

HTML：

<table border="1" class="altTable">
<th>ID</th>
<th>NAME</th>
<th>Miles</th>
<th>WORK</th>
<tbody>
    <tr>
        <td class="td_id">999B</td>
        <td class="td_name ">John</td>
        <td class="td_cumMiles">702.4</td>
        <td class="td_workEvent">Y</td>
    </tr><tr>
    <td class="td_id" rowspan="2">111A</td>
    <td class="td_name">Tom</td>
    <td class="td_cumMiles">446.5</td>
    <td class="td_workEvent">Y</td>
    </tr><tr>
    <td class="td_name">Becky</td>
    <td class="td_cumMiles">446.5</td>
    <td class="td_workEvent">A</td>
    </tr>
</tbody>

JAVASCRIPT：

for(var j=0; j < inspection.length; j++){
var $tr = $('<tr></tr>');
var $td_id = $('<td></td>').addClass('td_id').html(inspection.id);
$tr.append($td_id);
$table.append($tr);

$.each(inspection[i], function(index, value){
var $td_name, $td_miles,$td_workEvent;
if(index > 0){
    var $2nd_tr = $('<tr></tr>');

    $td_name = $('<td></td>').addClass('td_name').html(value.stationSt);
    $td_miles = $('<td></td>').addClass('td_miles').html(value.miles);
    $td_workEvent = $('<td></td>').addClass('td_workEvent').html(value.code);
    $2nd_tr.append($td_name);
    $2nd_tr.append($td_miles);
    $2nd_tr.append($td_workEvent);
    $table.append($2nd_tr);
    $td_id.attr('rowSpan',index+1);

    if($td_id.text() === content().td_id){
            $2nd_tr.addClass("highlightedClass");   
    }else{
        if($2nd_tr.hasClass("highlightedClass")){                    
            $2nd_tr.removeClass('highlightedClass');
        }
    }
    $('#workevent').on('click', function(){
                if($td_id.text() === content().td_id){
                                $2nd_tr.addClass("highlightedClass");   
                            }else{
                                if($2nd_tr.hasClass("highlightedClass")){
                                    $2nd_tr.removeClass("highlightedClass");
                                }
                            }
    });
}else{
    $td_name = $('<td></td>').addClass('td_name').html(value.stationSt);
    $td_miles = $('<td></td>').addClass('td_miles').html(value.miles);
    $td_workEvent = $('<td></td>').addClass('td_workEvent').html(value.code);
    $tr.append($td_name);
    $tr.append($td_miles);
    $tr.append($td_workEvent);
    $table.append($tr); 

    if($td_id.text() === content().id){
        $tr.addClass("highlightedClass");
    }else{                              
        if($tr.hasClass("highlightedClass")){
            $tr.removeClass('highlightedClass');
        }
    }                   
}   
});

这是在嵌套的 if 语句中。下面像三个 if 语句，我把这个：

       $('#workevent').on('click', function(){                  
    var flag= false;
    $('#altTable > tbody  > tr').each(function() {
        $td_id= $(this).find('.td_id');
        if($td_id.text() === ''){
            if(flag === true){
                $(this).addClass("highlightedClass");
                flag = true;
            }
        }else{
            if(if($td_id.text() === content().idtd_id{){
                if($(this).hasClass("highlightedClass")){
                    flag = true;
                }else{
                    $(this).addClass("highlightedClass");
                    flag = true;
                }
            }else{
                flag = false;
                if($(this).hasClass("highlightedClass")){     
                    $(this).removeClass("highlightedClass");

                }
            }
        }

    });
});

这对我有用。我选择了 TrueBlueAussie 的答案，因为它帮助我得到了具体的答案。希望这两个答案都可以在将来对其他人有所帮助。

【讨论】：