JavaScriptを使ってtable(一行ごとに背景色が違って見やすいもの)を作成したいです。
ただ今JavaScriptについて勉強中の者です。
何卒皆様のお力をお借りしたく質問させていただきます。
JavaScriptを使って上記のものを作成したいと考えています。
theadをクリックするとテーブルが100まで自動生成されます。
自動生成されたテーブルの奇数番号のセルの背景色をグレーにしたいと考えています。
tableの作成自体はできたのですが、一行ごとに背景色を変えることができていません・・・
発生している問題・エラーメッセージ
背景色の設定が反映されない
エラーは出ていません
該当のソースコード
JavaScript
1var t1 = document.getElementById('t1'); 2t1.addEventListener('click', function () { 3 4 var tbody = document.getElementById('tbodyID'); 5 6 for (i = 0; i < 100; i++){ 7 var tr = document.createElement('tr'); 8 if(i%2==1){ 9 tr.style.backgroundColor = "#dcdcdc"; 10 }; 11 for (j = 0; j < 1; j++){ 12 var td = document.createElement('td'); 13 for (k = 0; k <= i; k++) { 14 td.innerHTML = k + 1; 15 tbody.appendChild(td); 16 } 17 } 18 19 for (j = 0; j < 1; j++){ 20 var td = document.createElement('td'); 21 td.innerHTML = 'ユーザー名' + k; 22 tbody.appendChild(td); 23 } 24 25 for (j = 0; j < 1; j++){ 26 var td = document.createElement('td'); 27 td.innerHTML = 'ログインID' + k; 28 tbody.appendChild(td); 29 } 30 31 for (j = 0; j < 1; j++){ 32 var td = document.createElement('td'); 33 td.innerHTML = 'パスワード' + k; 34 tbody.appendChild(td); 35 } 36 37 tbody.appendChild(tr); 38 39 }//行用のループ閉じ 40}//クリック関数の閉じ 41, { 42 once: true 43}); 44
試したこと
色々な部分にtr.style.backgroundColor = "#dcdcdc";を配置してみたり
logを使ってどの部分が正常に処理されていないのか試してみたのですがわからずです・・・
補足情報(FW/ツールのバージョンなど)
コードはアトムを使って作成しています。
動作環境はChromeです。
回答2件
あなたの回答
tips
プレビュー