質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

2596閲覧

テーブルに追加した行の偶数番目に背景色をつけたい。

InfiniteLoop

総合スコア9

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/06/19 11:01

テーブルに追加した行の偶数番目に背景色をつけたい。

現在、JavaScriptを使って簡易的なTo-Doリストを制作しています。
詳しく説明しますと、情報をフォームに入力し追加ボタンを押すことによって、その内容を含んだ行がテーブルに下から追加されていくという仕様になっています。私は次に、追加した行の偶数番目に背景色をつけようと思い、ネットでjQueryを調べながらコードを書いていたのですが思うようにうまく色を変えることができません。どのようにすれば背景色を変えることができますか。ご教授お願い致します。

発生している問題・エラーメッセージ

追加した行の偶数番目の背景色を変えることができない。 (ソースコード該当行番号:56行目)

該当のソースコード

JavaScript

1<script type="text/javascript"> 2 //ここに記入 3 $(function(){ //jqueryのコード記述 4 var TODO; 5 var Term; 6 var Priority; 7 8 $("#inputTODO").on("change", storeTODO); 9 function storeTODO(){ 10 TODO = $('input[name="TODO"]').val(); 11 } 12 13 $("#inputTerm").on("change", storeTerm); 14 function storeTerm(){ 15 Term = $('input[name="term"]').val(); 16 } 17 18 $("#inputPriority").on("change", storePriority); 19 function storePriority(){ 20 Priority = $('#inputPriority').val(); 21 } 22 23 $("#addTODOlist").on("click", addlist); 24 function addlist(){ 25 if(TODO==undefined||Term==undefined||Priority==undefined){ 26 alert("すべてのフォームに入力してください。"); 27 return; 28 } 29 $(function(){ 30 var checkbox = '<input type="checkbox">'; 31 $("#TODOlist tr:last") 32 .after("<tr><th>"+TODO+"</th><th>"+Term+"</th><th>"+Priority+"</th><th>"+checkbox+"</th></tr>"); 33 34 //入力フォームのリセット 35 TODO = undefined; Term = undefined; Priority = undefined; 36 $('input[name="TODO"]').val(undefined); 37 $('input[name="term"]').val(undefined); 38 $('#inputPriority').val(undefined); 39 40 }); 41 } 42 43 44 $("#doneTODO").on("click", deletelist); 45 function deletelist(){ //チェックの入った行を削除する 46 if($("input:checked").val()){ 47 $('tr input:checked').parents('tr').remove(); 48 } 49 } 50 $("#TODOlist > tr:even").css("background-color", "yellow"); //背景色を変えたい。 51 52 53 }); 54 55 56 </script>

試したこと

$("#TODOlist").css("background-color", "yellow");と書くと当たり前ですがテーブルの項目部分に色が付いてしまいます。なので追加した行を対象とするために、trタグにクラス名を付けてみたり、jQueryの式をいろいろ書き換えてみたりと自分ができる限りの努力を尽くしたのですが、結局うまくできませんでした。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

css

1table tbody tr:nth-of-type(even) { 2 background-color: #F3F3F3; 3}

CSSでこのようにしてすれば、jQueryでゴニョゴニョする必要がなくなります。

投稿2018/06/19 11:07

編集2018/06/19 11:10
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

JavaScript

1$("#TODOlist > tr:even")

おそらく "TODOlist" というのが table 要素の id だと思いますが、これは予想に反してうまくいきません(いかないことがあります)。

HTML4 時代、table 要素には tbody 要素が必須でありながら、<tbody> タグは省略可能でした。このため、ブラウザは table 要素直下に tr 要素が現れると(勝手に) tbody 要素を補います。

この仕様は XHTML になって tbody 要素のない形も許可することになって、 tbody 要素は必須ではなくなっています。

HTML5 においても仕様上 tbody 要素は必須ではありませんがブラウザが補う動作は変わっていません。XHTML5 (HTML5 の XML 形式) であれば tbody のない table を認識させられますが、ブラウザによってはレスポンスヘッダに"application/xhtml+xml"が必要です。

このように場合によって挙動が変わってしまうため、常に tbody 要素を使ったほうが安全です。

CSS

1#TODOlist > tbody > tr:nth-child(even) > td, 2#TODOlist > tbody > tr:nth-child(even) > th { 3 background-color: rgba(255, 255, 0, .5); 4}

投稿2018/06/20 04:51

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問