Question

我有一个动态生成的表，我正在尝试更改某些行的背景颜色。有时会有包含rowpans的行，我无法弄清楚如何获取与“一行”对应的所有行。我已经搜索了我的大脑，发现这个jsfiddle非常接近我所需要的（在逻辑意义上）

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

基本上我有这样的事情：

enter image description here

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

enter image description here

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

enter image description here

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

Answer 1

您需要在所选的rowspan=中查找任何td属性，如果存在，也请选择后续行。此示例应支持任何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集合/对象。

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的答案，因为它帮助我得到了我的具体答案。希望这两个答案可以在将来帮助其他人。

如何选择与rowspan对应的行？

2 个答案:

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

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