0

次のテーブル構造をレンダリングするasp.netグリッドビューがあります。 

<table>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
<tr><td>cell1</td><td>cell2</td><td>cell3</td></tr>
</table>

次の jQuery ステートメントを使用して、ヘッダー以外の各行の行全体を強調表示しています。 

$("table tr:has(td)").css({ background: "ffffff" }).hover(
  function () { $(this).css({ background: "#FC6" }); },
  function () { $(this).css({ background: "#ffffff" }); }
);

このコードを変更して、行の 3 番目 (最後) のセルではなく、ヘッダー以外の各行を強調表示するにはどうすればよいですか? たとえば、行の最初の 2 つのセルを同時に強調表示しますが、3 番目のセルは強調表示しません。

誰かがセレクターロジックの適切な Web リファレンスを持っている場合は、それも高く評価されます。

4

2 に答える 2

1

:not() セレクターを:last-child()セレクターと組み合わせて使用​​すると、次のようにこれを実現できます。

$("tr:has(td)").hover(function() {
    $(this).find("td:not(:last-child)").css("background-color", "#FC6");
}, function() {
    $(this).find("td").css("background-color", "#FFF");
});​

これにより、3 つの列に縛られないという追加の利点も得られます。これを示すフィドルを次に示します。

于 2012-10-05T05:27:07.263 に答える
0

このリンクフィドルを参照してください。

<table>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
<tr><td class="c1">cell1</td><td class="c2">cell2</td><td>cell3</td></tr>
<tr><td class="c1">cell1</td><td class="c2">cell2</td><td>cell3</td></tr>
</table>

$(".c1").closest('td').css('background-color', 'red');
$(".c2").closest('td').css('background-color', 'red');
于 2012-10-05T04:13:16.977 に答える