如何选择与行跨度相对应的行?

问题描述

我有一个动态生成的表，我试图更改其中某些行的背景颜色.有时某些行的行距很宽，我无法弄清楚如何获取与一个行"相对应的所有行.我用脑子搜寻了一下，发现了这个jsfiddle，它非常接近我所需要的(从逻辑上来说)

I have a dynamically generated table that I am trying to change the background color of certain rows in. Sometimes there are rows with rowspans and I cant figure out how to get all of the rows that correspond to the one "row." I've googled my brains out and found this jsfiddle which is pretty close to what i need (in a logic sense)

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

基本上我有这样的东西:

basically i have something like this:

并且我希望能够一次突出显示完整的行:

and I want to be able to highlight full rows at a time like this:

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

but the only highlighting i can achieve on rowspan rows is this:

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

Here is my code (different from jsfiddle but essentially same logic)

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:

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');
    });
}
});

推荐答案

您需要在选定的td中查找任何rowspan=属性，如果存在，还请选择随后的行.此示例应支持任何rowpan值(它会根据rowpan计数追加后续的行):

You need to look for any rowspan= attribute in the selected tds and if present, select the subsequent row(s) as well. This example should support any rowspan value (it appends subsequent rows based on the rowspan count):

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

需要对位于前一个行跨度以下的子行进行调整，但也正在对此进行操作.

It needs to be tweaked for the child row that sits under a previous rowspan, but am working on that too.

注释:

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

• ~~ is a shortcut to convert a string to an integer.
• the || 0 converts undefined values to 0.
• $row = $row.add($tr) is appending row elements to a jQuery collection/object.

这篇关于如何选择与行跨度相对应的行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！