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

値yでクラス.lastを追加する必要がありますtd

魔女クラスをマークしたい「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>して、rowspan を使用して最後のものを取得し、次に最後の行の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クラスを割り当てます。最後から 2 番目の行にのみ割り当てたい<td>場合は、追加のロジックを追加して行インデックスをチェックできますが、行スパンが 2 より大きい場合は注意が必要です....last

$('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 を使用するかどうかに関係なく)、次のコードが機能します ( 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 に答える