tableに入った数字をクリックした時、クリックした「table td」の背景色を
変えたいと思います。
但し、背景色が変わるのはクリックした1つのtdだけで、
例えば1をクリックした時、1のtd背景色が赤になり、他は白。
その状態から2をクリックした時、2のtd背景色が赤になり、他は白
というように1つだけの背景色を変更したいです。(?日本語がおかしかったらすみません)
javascriptでわからないのは、document.getElementsByClassNameで、すべての
背景色を白にし、選択した要素のみ赤にするというところです。(現在1つだけ赤くなります)
function Change() { elements = document.getElementsByClassName("td01"); elements[0].style.backgroundColor = 'red'; }
jsdo.itに残してみましたので赤いスタートボタンを押してご覧ください。
http://jsdo.it/i010010/MO9D
よろしくお願いします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答4件
0
ベストアンサー
他の方も回答されていますが、getElementsByClassName は HTMLCollection を返すので for でそれぞれ処理すればよいです。
【document.getElementsByClassName() - classで要素を取得する】
https://syncer.jp/javascript-reference/document-getelementsbyclassname
ちなみにCSSでも実現可能です。
CSS
1.td01:target { 2 background-color: red; 3}
HTML
1<table id="tbl01"> 2 <tr class="tr01"> 3 <td class="td01" id="a01"><a href="#a01">1</a></td> 4 <td class="td01" id="a02"><a href="#a02">2</a></td> 5 <td class="td01" id="a03"><a href="#a03">3</a></td> 6 <td class="td01" id="a04"><a href="#a04">4</a></td> 7 <td class="td01" id="a05"><a href="#a05">5</a></td> 8 </tr> 9</table> 10```**動くサンプル:**[https://jsfiddle.net/87ohaanm/](https://jsfiddle.net/87ohaanm/) 11 12--- 13 14 15【[CSS]知ってると便利!「:target疑似クラス」を使ったスタイルシートのテクニックと注意点 | コリス】 16[http://coliss.com/articles/build-websites/operation/css/target-pseudo-class-trick.html](http://coliss.com/articles/build-websites/operation/css/target-pseudo-class-trick.html) 17 18【CSS 擬似クラス targetについて - Qiita】 19[http://qiita.com/junya/items/c9741fbddb667992a1ef](http://qiita.com/junya/items/c9741fbddb667992a1ef)
投稿2017/07/02 05:12
総合スコア69407
0
的外れかもしれませんが、以下のように行ってはいかがでしょうか?
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 #tbl01 { 8 margin: 0 auto; 9 margin-bottom: 15px; 10 width: 200px; 11 text-align: center; 12 border: 1px black solid; 13 border-radius: 8px; 14 background-color: white; 15 } 16 17 .td01 { 18 width: 40px; 19 border: 1px black solid; 20 text-align: center; 21 } 22 </style> 23</head> 24<body> 25<table id="tbl01"> 26 <tr class="tr01"> 27 <td class="td01" id="a01"><a href="javascript:void(0)" onclick="Change(this); return false;">1</a></td> 28 <td class="td01" id="a02"><a href="javascript:void(0)" onclick="Change(this); return false;">2</a></td> 29 <td class="td01" id="a03"><a href="javascript:void(0)" onclick="Change(this); return false;">3</a></td> 30 <td class="td01" id="a04"><a href="javascript:void(0)" onclick="Change(this); return false;">4</a></td> 31 <td class="td01" id="a05"><a href="javascript:void(0)" onclick="Change(this); return false;">5</a></td> 32 </tr> 33</table> 34<script> 35 function Change(arg) { 36 var td01 = document.getElementsByClassName("td01"); 37 for (var i = 0; i < td01.length; i++) { 38 if (td01[i] === arg.parentNode) { 39 td01[i].style.backgroundColor = "#ff0000"; 40 } else { 41 td01[i].style.backgroundColor = "#ffffff"; 42 } 43 } 44 } 45</script> 46</body> 47</html>
投稿2017/07/02 04:04
総合スコア14731
0
恥ずかしながらCSSで簡単にできました。
.td01:target {
background-color: red;
}
投稿2017/07/02 06:10
退会済みユーザー
総合スコア0
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
<!DOCTYPE> <html lang="ja"> <head> <meta charset="UTF-8"> <title>aa</title> <style> #tbl01 { margin: 0 auto; margin-bottom: 15px; width: 200px; text-align: center; border: 1px black solid ; border-radius: 8px; background-color:white; } .td01{ width: 40px; border: 1px black solid ; text-align: center; } </style> </head> <body> <table id="tbl01"> <tr class="tr01"> <td class="td01" id="a01"><a href="javascript:void(0)" onclick="Change(this); return false;">1</a></td> <td class="td01" id="a02"><a href="javascript:void(0)" onclick="Change(this); return false;">2</a></td> <td class="td01" id="a03"><a href="javascript:void(0)" onclick="Change(this); return false;">3</a></td> <td class="td01" id="a04"><a href="javascript:void(0)" onclick="Change(this); return false;">4</a></td> <td class="td01" id="a05"><a href="javascript:void(0)" onclick="Change(this); return false;">5</a></td> </tr> </table> <script> const cl = document.getElementsByClassName("td01"); function Change(e) { const a = e.parentNode; for(let i = 0; cl.length>i;i++){ cl[i].style.backgroundColor = 'white'; a.style.backgroundColor = 'red'; } } </script> </body> </html>
こんな感じ?
投稿2017/07/02 04:22
編集2017/07/02 04:22総合スコア2050
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/07/02 06:09
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/07/02 06:07