回答編集履歴
1
質問本文のhtml変更にあわせて修正
answer
CHANGED
@@ -1,39 +1,32 @@
|
|
1
1
|
1行目限定ならこう
|
2
2
|
```
|
3
3
|
$(function(){
|
4
|
-
$(".staff:nth-of-type(1)").css("background-color","#ccc");
|
4
|
+
$(".staff tr:nth-of-type(1)").css("background-color","#ccc");
|
5
5
|
});
|
6
6
|
|
7
7
|
```
|
8
8
|
|
9
|
+
# 余談
|
9
10
|
「クリックした行を灰色にする」という感じで遊んでみました。
|
10
11
|
何かの参考にしてみてください。
|
11
12
|
```html
|
12
|
-
</head>
|
13
|
-
|
14
13
|
<style>
|
15
14
|
.g{
|
16
15
|
background-color:#ccc;
|
17
16
|
}
|
18
17
|
</style>
|
19
18
|
|
20
|
-
<table>
|
21
|
-
<
|
19
|
+
<table class="staff">
|
22
|
-
<td>1</td><td>A</td><td>AA</td><td>AAA</td><td>AAAA</td>
|
20
|
+
<tr><td>1</td><td>A</td><td>AA</td><td>AAA</td><td>AAAA</td></tr>
|
23
|
-
</tr>
|
24
|
-
<tr class="staff">
|
25
|
-
<td>2</td><td>B</td><td>BB</td><td>BBB</td><td>BBBB</td>
|
21
|
+
<tr><td>2</td><td>B</td><td>BB</td><td>BBB</td><td>BBBB</td></tr>
|
26
|
-
</tr>
|
27
|
-
<tr class="staff">
|
28
|
-
<td>3</td><td>C</td><td>CC</td><td>CCC</td><td>CCCC</td>
|
22
|
+
<tr><td>3</td><td>C</td><td>CC</td><td>CCC</td><td>CCCC</td></tr>
|
29
|
-
</tr>
|
30
23
|
</table>
|
31
24
|
|
32
25
|
```
|
33
26
|
|
34
27
|
```script
|
35
|
-
$('.staff').on('click', function(){
|
28
|
+
$('.staff tr').on('click', function(){
|
36
|
-
$('.staff').removeClass("g");
|
29
|
+
$('.staff tr').removeClass("g");
|
37
30
|
$(this).addClass("g");
|
38
31
|
});
|
39
32
|
```
|