Question

您好，我有这张表

<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>

我需要按班级.last标记最后一个视觉TD。没有rowspan没有问题，我可以使用

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

我需要将.last添加到td，其值为y

一些带有'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>

Answer 1

使用多重选择器使用<td>获取包含行数的最后table td[rowspan]:last，然后使用<td>

在最后一行中使用table 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');
    });
}

如果您希望所有行都触及最后一行（通过rowspan或不通过rowspan），那么以下代码将起作用（请参阅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');
});

Answer 2

我找到了这种溶剂。不是在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'));

如何在表中添加类到最后一个TD，其中是rowspan。用jQuery

2 个答案: