Question

I have the following jQuery that I m trying to use to change the background colour of a column where its header has a class.

So for example:

$( th ).each(function (i) {

            if ($(this).hasClass( headerSortUp ) || $(this).hasClass( headerSortDown )) {
                sortIndex = $(this).index();
            }
            $( tr ).each(function () {
                $( td:eq(  + sortIndex +  ) ).css( background-color ,  orange );
            });

        });

因此,如果我有这样一个表格:

<table>
<tr>
    <th class="headerSortDown">Header</th>
    <th>Header</th>
    <th>Header</th>
    <th>Header</th>
    <th>Header</th>
</tr>
<tr>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
</tr>
<tr>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
</tr>
<tr>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
</tr>
</table>

因此,在这一例子中,整个第一栏应当有一 b。但是,它没有工作...... 我已经做过错的任何想法? 增编

Answer 1

页: 1

$( td:eq(  + sortIndex +  ) , this).css( background-color ,  orange );

Answer 2

Try changing sortIndex = $(this).index(); to sortIndex =i; and
$( td:eq( + sortIndex + ) ).css( background-color , orange ); to

$(td:eq(+ lyIndex + ) ,$ (this)cs ( background-color , orange ); to selected td s with the tr

Answer 3

There s no need to iterate over the <th> elements - a selector can pick out just the ones with the right classes.

之后,请使用<代码>.index(),以找到其栏目价值;:nth-child(<>/code>,选择每一栏目<代码><td>。

$( .headerSortUp, .headerSortDown ).each(function() {
    var n = $(this).index() + 1;
    $( td:nth-child(  + n +  ) ).css( background-color ,  orange );
});

Working demo at 。

[我还注意到,原法典有逻辑错误——更改颜色的代码应在<条码>内......>}栏内,而不是在其外面]。

Answer 4

可能有一个较好的甄选者,造成较少的频率

var sortIndex;

$( th ).each(function (i) {

            if ($(this).hasClass( headerSortUp ) || $(this).hasClass( headerSortDown )) {
                sortIndex = $(this).index();
            }
    });


$( td:nth-child(  +sortIndex+1+ ) ).css( background-color ,  orange );

http://jsfiddle.net/ryan_s/nZr9G/“rel=“nofollow” http://jsfiddle.net/ryan_s/nZr9G/。

友情链接