特定のブロックだけ色を変更する方法はjQueryでは、どのようなやり方がありますか？

Question

上図のような、1のレコードだけ灰色にするような、記述はどのように書けばよいでしょうか？
今の記述だと全体が灰色になってしまうため、ご教授いただけないでしょうか？
よろしくお願いします。

<table border="1" class="staff">
<tr><td>1</td><td>A</td><td>AA</td><td>AAA</td><td>AAAA</td></tr>
<tr><td>2</td><td>B</td><td>BB</td><td>BBB</td><td>BBBB</td></tr>
<tr><td>3</td><td>C</td><td>CC</td><td>CCC</td><td>CCCC</td></tr>
</tr>
</table>

no ・・・ 主キーを利用しています。

function setOn(no) {
	$('.staff').css('background-color','#ffffff');
};

Comments

[m.ts10806]

ご提示のHTMLだとそもそも全てで1レコードになっているのですが・・・

[hiro0208]

すみません。間違っていました。修正しています。

[m.ts10806]

setOn()　の呼び出しがどこにも書かれていないので、そこも追記いただけますか？　「ページ表示に」だと既に回答があるようにjQueryなしのCSSだけで対応した方が良いですし、何かのタイミングで背景変更イベントが起きるのであればそちらも明示してください。

Answer 1

HTMLこれであっていますでしょうか？

<tr class="staff">
<td>1</td><td>A</td><td>AA</td><td>AAA</td><td>AAAA</td>
</tr>

<tr class="staff">
<td>2</td><td>B</td><td>BB</td><td>BBB</td><td>BBBB</td>
</tr>

<tr class="staff">
<td>3</td><td>C</td><td>CC</td><td>CCC</td><td>CCCC</td>
</tr>

なきがしますが……

この場合だと、
:nth-of-type(n)だというものが使えそうな気がします。

$('tr:nth-of-type(1)').css('backgroundColor', 'gray');

と言った感じですかね？

追記

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>

<table>
    <tr class="staff">
        <td>1</td><td>A</td><td>AA</td><td>AAA</td><td>AAAA</td>
    </tr>

    <tr class="staff">
        <td>2</td><td>B</td><td>BB</td><td>BBB</td><td>BBBB</td>
    </tr>

    <tr class="staff">
        <td>3</td><td>C</td><td>CC</td><td>CCC</td><td>CCCC</td>
    </tr>
</table>


<script>
$(function(){
    $('tr:nth-of-type(1)').css('backgroundColor', 'gray');

    // １列目の色を解除
    setOff(1);

    // 2列目に色を付けてみる
    setOn(2);
});


// こいつかな？
function setOn(num){
    // 指定した列の色を変える
    $('tr:nth-of-type('+ num +')').css('backgroundColor', 'gray');
}


// ついで
function setOff(num){
    // 指定した列の色を元に戻す
    $('tr:nth-of-type('+ num +')').css('backgroundColor', '');
}


</script>

Comments

[hiro0208]

ありがとうございます!
$('tr:nth-of-type(1)')の引数の「1」に選択した場合色が変わりました。

ちなみに、選択したレコードの色を変えるために
主キーnoを利用する関数setOnを作りたいのですが、、、どのようにするかお分かりになりますか？

[nnahito]

追記しました

Answer 2

1行目限定ならこう

$(function(){
 $(".staff tr:nth-of-type(1)").css("background-color","#ccc");
});

余談

「クリックした行を灰色にする」という感じで遊んでみました。
何かの参考にしてみてください。

<style>
.g{
 background-color:#ccc;
}
</style>

<table class="staff">
<tr><td>1</td><td>A</td><td>AA</td><td>AAA</td><td>AAAA</td></tr>
<tr><td>2</td><td>B</td><td>BB</td><td>BBB</td><td>BBBB</td></tr>
<tr><td>3</td><td>C</td><td>CC</td><td>CCC</td><td>CCCC</td></tr>
</table>

$('.staff tr').on('click', function(){
	$('.staff tr').removeClass("g");
	$(this).addClass("g");
});

Answer 3

ご提示のHTMLは行に分かれていませんが？
classはtable自体につけていいのでしょうか？
cssで十分かと思います。

.staff tr:first-child{
  background-Color:#808080;
}

<table class="staff">
<tr><td>1</td><td>A</td><td>AA</td><td>AAA</td><td>AAAA</td></tr>
<tr><td>2</td><td>B</td><td>BB</td><td>BBB</td><td>BBBB</td></tr>
<tr><td>3</td><td>C</td><td>CC</td><td>CCC</td><td>CCCC</td></tr>
</table>

つけたり消したり

つけたり消したりするのもclassをベースにやったほうが楽だとおもいますが

<style>
.trgray{background-Color:gray;}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.js" ></script>
<script>
$(function(){
  $('.staff:eq(0)').toggleClass('trgray');
  $('.staff:eq(1)').toggleClass('trgray');
});
</script>
<table>
<tr class="staff trgray"><td>1</td><td>A</td><td>AA</td><td>AAA</td><td>AAAA</td></tr>
<tr class="staff"><td>2</td><td>B</td><td>BB</td><td>BBB</td><td>BBBB</td></tr>
<tr class="staff"><td>3</td><td>C</td><td>CC</td><td>CCC</td><td>CCCC</td></tr>
</table>