teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

質問本文のhtml変更にあわせて修正

2017/06/30 06:19

投稿

m.ts10806
m.ts10806

スコア80888

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
- <tr class="staff">
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
  ```