1

你好我有这张桌子

<table>
<tr>
    <td>n</td>
    <td rowspan=2>n</td>
    <td>n</td>
    <td>n</td>
</tr>
<tr>
    <td rowspan=2>y</td>
    <td>n</td>
    <td rowspan=2>y</td>
</tr>
<tr>
    <td>y</td>
    <td>y</td>
</tr>

我需要按类标记最后一个视觉 TD .last。没有行跨度没有问题，我可以使用

$('table tr:last td').addClass('last');

我需要添加.last值tdy 的类

一些带有“y”的单元格示例，我想将其标记为女巫类 http://jsfiddle.net/9gtMa/

http://jsfiddle.net/MQh8u/

http://jsfiddle.net/zL6Pe/

我需要像这样的输出

<table>
    <tr>
        <td>n</td>
        <td rowspan=2>n</td>
        <td>n</td>
        <td>n</td>
    </tr>
    <tr>
        <td rowspan=2 class='last'>y</td>
        <td>n</td>
        <td rowspan=2 class='last'>y</td>
    </tr>
    <tr>
        <td class='last'>y</td>
        <td class='last'>y</td>
    </tr>
</table>
4

2 回答 2

1

使用多重选择器来获取最后一个<td>具有行跨度的选择器table td[rowspan]:last，然后<td>使用最后一行中的两个 stable tr:last td

$('table td[rowspan]:last, table tr:last td').addClass('last');

根据您在http://jsfiddle.net/qEhng/中的示例，您可以使用 td[rowspan] 找到最大行索引，然后像这样在其上设置类。效率不是很高，但它只会将.last类分配给<td>具有最高行索引上的行跨度的 s。如果您只想分配.last到倒数第二行，您可以添加额外的逻辑来检查行索引，但是如果您的行跨度大于 2，这将变得很棘手......

$('table tr:last td').addClass('last');
var maxRow = 0;
$('table td[rowspan]').each(function(){
    var row = $(this).parent().parent().children().index($(this).parent());
    if (row>maxRow) maxRow=row;
});
$('table td[rowspan]').each(function(){
    var row = $(this).parent().parent().children().index($(this).parent());
    if (row==maxRow) $(this).addClass('last');
});

这是仅将.last类添加到具有流到最后一行的最大行跨度的 td 的代码 - http://jsfiddle.net/qEhng/5/

$('table tr:last td').addClass('last');
var maxRow = 0;
var rowSpan = 0;
$('table td[rowspan]').each(function(){
    var row = $(this).parent().parent().children().index($(this).parent());
    if (row>maxRow){
        maxRow=row;
        rowSpan=0;
    }
    if ($(this).attr('rowspan')>rowSpan) rowSpan = $(this).attr('rowspan');
});
if (maxRow==$('table tr:last td').parent().parent().children().index($('table tr:last td').parent())-(rowSpan-1)){
    $('table td[rowspan]').each(function(){
        var row = $(this).parent().parent().children().index($(this).parent());
        if (row==maxRow && $(this).attr('rowspan')==rowSpan) $(this).addClass('last');
    });
}

如果您想要所有触及最后一行的行（通过或不通过行跨度），那么以下代码将起作用（请参阅http://jsfiddle.net/zL6Pe/）

$('table tr:last td').addClass('last');
var rows = $('table tr:last').parent().children().length;
$('table td[rowspan]').each(function(){
   if ($(this).parent().parent().children().index($(this).parent())+parseInt($(this).attr('rowspan'))==rows) $(this).addClass('last');
});​
于 2012-10-03T13:49:08.557 回答
0

我找到了这个解决方案。不在 jsfiddle 示例上工作，我不知道为什么，但它似乎完全可以工作。

getOffSet = function(rowSpansPerCol, startIndex){
    var offSet = 0;
    for(i=startIndex;i<rowSpansPerCol.length;i++){
        if(rowSpansPerCol[i]==1){
            return offSet;
        }
        else{
            offSet+1;
        }
    }
    return offSet;
}

markCells = function(table){
    var rows = table.find('tr');
    var columnCount = table.find('tr:first td').size();
    var rowSpansPerCol = new Array();

    rows.each(function(rowIndex) {
        jQuery(this).find('td').each(
                        function(colIndex) {
                            var offset = getOffSet(rowSpansPerCol, colIndex);
                            if ((rowSpansPerCol[colIndex+offset] == null || rowSpansPerCol[colIndex+offset]==1) && (jQuery(this).attr('rowSpan')+rowIndex == rows.size() || rows.size() == rowIndex+1)) {
                                jQuery(this).addClass('last')
                            } else {
                                rowSpansPerCol[colIndex+offset] = jQuery(this).attr('rowSpan');
                            }

                        })
})  
}

markCells(jQuery('table'));
于 2012-10-04T11:05:24.093 回答