如何选择对应于rowspan的行？

Question

我有一个动态生成的表格，我尝试更改其中某些行的背景颜色。有时，行中会有行合并，而我无法确定如何获取与“行”对应的所有行。我已经搜索了很多资料，发现这个 jsfiddle 很接近我所需的（在逻辑上）。

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

基本上我有这样的东西：

我希望能够一次性突出显示整行内容，就像这样：

但我只能在跨行单元格上实现这样的高亮效果：

这是我的代码（与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');            
    });  
}   
});

- user2847749

---

你需要查找所选的 td 中是否有任何 rowspan= 属性，如果存在，则同时选择后续行。 - iCollect.it Ltd

费了很多功夫，但是现在已经让它适用于所有情况了。答案已在下面更新。祝使用愉快 :) - iCollect.it Ltd

Answer 1

你需要查找所选的中的任何rowspan属性，如果存在，则也要选择后续行。此示例应支持任何rowspan值（它基于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 集合/对象中。

- Gone Coding

---

你太棒了，伙计！感谢你提供的详细说明、笔记和代码示例。非常有帮助。 - user2847749

@user2847749：很高兴你喜欢。这是一个有趣的练习 :) - iCollect.it Ltd

Answer 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的回答，因为它帮助我得到了我需要的答案。希望这两个答案能够在未来帮助其他人。

- user2847749