テーブルに追加した行の偶数番目に背景色をつけたい。
現在、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/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。