javascriptで行を追加しながら行の色分け

このQ&Aのポイント
  • jQueryを使用してボタンを押すと行が追加・削除されるようにしています。
  • 初期状態では色分けがされていますが、追加した行には適用されません。
  • 行を追加しながら、偶数行と奇数行の色を変化させる方法を教えてください。
回答を見る
  • ベストアンサー

javascriptで行を追加しながら行の色分け

jQueryでボタンを押すと行が追加・削除されるようにしています。 var data; jQuery(function(){ jQuery('#add').click(function(){ var len = $("#tbl tbody").children().length; if(len>19){ $("#add").attr("disabled","disabed"); } data = '<tr><td>' + (len+1) + '</td><td><textarea name="clmn' + (len+1) + '" cols="30" rows="10"></textarea></td><td><img src="/images/noimage.gif" alt="img' + (len+1) + '" /></td><td><input type="file" name="image' + (len+1) + '" /></td></tr>'; jQuery('#tbl').append(data); }); jQuery('#del_bottom').click(function(){ if (jQuery('tbody tr').length) { jQuery('tbody tr:last').remove(); } }); }); ここで偶数行と奇数行の色を変化させようと $(document).ready(function(){ $("table").each(function(){ jQuery(this).find("tr:even").addClass("even"); }); $("table").each(function(){ jQuery(this).find("tr:odd").addClass("odd"); }); }); というスクリプトを用意しましたが、 同時に動かそうとしても動きません。 何か方法は無いでしょうか? 初期状態では色分けをされていますが、追加した段階で追加された行には適応されません。 詳しいかた教えていただけるでしょうか?

質問者が選んだベストアンサー

  • ベストアンサー
回答No.3

function rowBgcolor(){ $("table").each(function(){ jQuery(this).find("tr:even").addClass("even"); }); $("table").each(function(){ jQuery(this).find("tr:odd").addClass("odd"); }); } を定義して、色をつけたいタイミングで rowBgcolor(); を呼び出してみてはどうでしょうか?

その他の回答 (2)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

$(document).ready(function(){ ・・・・ だと、初期表示状態のテーブルに対して処理するだけなので、後から追加した行には影響しません。 対応方法1 クラス指定をしているだけのようなので、後から追加する行に先にクラスを指定しておくようにする。 対応方法2 行を追加したら、奇/遇のクラス指定を行なう処理を再度実行する。 (行によって奇/遇が変わる場合は、1回クラス設定を削除する必要があるかも) 対応方法3 既に#1の回答にあるとおり、CSSで奇遇を書き分ける。(古いブラウザだと対応していないものがあるかも)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

モダンブラウザが対象ならcssでやるほうが楽では?

関連するQ&A

  • 【html】tableでの奇数行と偶数行の色分けについて

    【html】tableでの奇数行と偶数行の色分けについて 【html】tableでの奇数行と偶数行の色分けについて 現在tableの奇数行と偶数行を以下のように色分けしているのですが、 これだとrowspanを利用したとき、画像1のようにずれてしまいます。 $(document).ready(function(){  $("table").each(function(){   jQuery(this).find("tr:even").addClass("even");  }); }); この状態を画像2のようにしたいのですが、どのようにすれば出来るでしょうか? よろしくお願いします。 ※画像小さくてすみません。

    • ベストアンサー
    • HTML
  • jqueryを使ってtrの中のthとtdの色を入れ替えたいと思っていま

    jqueryを使ってtrの中のthとtdの色を入れ替えたいと思っています。 最近jqueryを導入してCSSをいじっているのですが、うまくいきません。 外部jsファイルで $(function(){ $(".A tr > *").mouseover(function(){ $(this).addClass("over"); }).mouseout(function(){ $(this).removeClass("over"); }); $(".A tr:even").addClass("even"); }); と書いています。 イメージとしてはテーブル中のtrで偶数と奇数で縞々になっているとことをマウスが乗っかるとそのtrに内包するthとtdが同じ色に変わるように設定したいと思っています。 外部CSSでは .over { background-color: #999; color: #FFF; } と設定しています。 これを実行するとするとthとtdが同時に色が変わらず、th上の時はthのみtd上の時はtdのみしか背景色がわりません。 参考となるURLだけでもかまいませんので、ご教授ください。

  • jQueryで行の移動

    jQueryでテーブルの行を移動させたいのですが、なかなかうまくいきません。 <table id = "table_test"> <tbody id = "test1"> <tr> <th>見出し1</th> <th>見出し2</th> <th><input type="button" id="button1" value="テスト1"></th> </tr> <tr> <td>項目1</td> <td>項目2</td> <td>項目3</td> </tr> </tbody> <tbody id = "test2"> <tr> <th>見出し1</th> <th>見出し2</th> <th><input type="button" id="button2" value="テスト2"></th> </tr> <tr> <td>項目1</td> <td>項目2</td> <td>項目3</td> </tr> </tbody> <tbody id = "test3"> <tr> <th>見出し1</th> <th>見出し2</th> <th><input type="button" id="button3" value="テスト3"></th> </tr> <tr> <td>項目1</td> <td>項目2</td> <td>項目3</td> </tr> </tbody> </table> 処理としては、button1を押下したら、<tbody id = "test1">~</tbody>の内容を<tbody id = "test2">と<tbody id = "test3">の間にくるように移動させたいです。 trの内容を次のtrの次に移動させることは調べてわかったのですが、tbodyで囲まれている部分をごっそり抜き出して、次のtbodyの後に移動させる方法がわかりません。 tbody内にはtrが複数あるため、移動させるというよりは、追加させてから削除するといった感じになるのでしょうか? どなたかご教授お願い致します。

  • テーブルの行操作について

    下記のJavaScriptの操作で質問があります。 ボタンを押すたびに1行目が最後に追加されていくと考えたのですが、 実際の動作では1行目が複製されず、行の入れ替えになってしまいます。 cloneNodeすれば行の追加になるのはわかりますが、なぜ下記の操作で行の入れ替えになるのでしょうか? <html> <head> <title>テーブルテスト</title> <script type="text/javascript"> <!-- function testFunction() { tableBody.appendChild(tableBody.childNodes(0)); } --> </script> </head> <body> <table border="1"> <thead> <tr><th>A</th><th>B</th><th>C</th></tr> </thead> <tbody id="tableBody"> <tr><td>foo</td><td>bar</td><td>hoge</td></tr> <tr><td>abc</td><td>def</td><td>ghij</td></tr> </tbody> </table> <input type="button" value="テスト" onclick="testFunction()" /> </body> </html>

  • IE がクラッシュします

    jquery-1.5.2.min.js を使っています。 スタイルシートで .displayon{ display:table-row; } .displaynone{ display:none; } を定義し 以下のスクリプトで表示・非表示を切り替えようとしています $(function(){ $( "select[name='cat']" ).change( function(){ $( ".item_list" ).removeClass( "displayon" ); $( ".item_list" ).addClass( "displaynone" ); $( "." + $( "select[name='cat']" ).val() ).removeClass( "displaynone" ).addClass( "displayon" ); }); }); //読み込んだ時に catid0 を表示する window.onload = $(function(){ $( ".item_list" ).removeClass( "displayon" ); $( ".item_list" ).addClass( "displaynone" ); $( ".catid0" ).removeClass( "displaynone" ).addClass( "displayon" ); }); HTML ソースは <table><tbody> <tr class="item_list catid0"><td>アイテム1</td></tr> <tr class="item_list catid3"><td>アイテム2</td></tr> <tr class="item_list catid1"><td>アイテム3</td></tr> <tr class="item_list catid0"><td>アイテム4</td></tr> <tr class="item_list catid2"><td>アイテム5</td></tr> : : </tbody></table> この時、Firefox では問題なく表示されるのですが、 Internet Exploler だとクラッシュしてしまいます。 どこがおかしいのでしょうか?

  • jqueryで<tr>の制御

    jqueryを用いて、<td>2個ずつを<tr>でくくるように自動制御したいです。 <td>の数が増えたり、順番も変わるのでそれを1段に2個ずつで配置するのが目的です。 <head>内に $("td:odd").before("<tr>"); $("td:even").after("</tr>"); としたのですが、なぜか上手くいきません。 アドバイスお願いします。

  • Jqueryでのテーブル背景色設定について

    お世話になります。 CSSとJavascriptどちらで投稿しようか考えたのですが、Jqueryを使用しているのでこちらに質問させていただきました。 ブラウザはIE8を使用しています。 今回 <table class="list"> <tr><th></th></tr> <tr><td></td></tr> . . . <tr><td></td><tr> </tr> このようなテーブルを作りセルの背景色一行ごとに変えたいと思いJqueryで $(function(){ $('table.list tr:even').addClass("linecolor"); }); というスクリプトを作ったのですが反映されません。 CSSは .linecolor{ background#FFFFC4;} としてます。 原因を探ったのですが、いくつかのサイトを見てもこの書き方で問題ないように思います。 試験的にロジックを替えスクリプトの"tr"を"td"と書き換えるとスタイルが適応され、 <tr> => <tr class="linecolor>"としてもスタイルが適応されませんでした。 このことから個人的な結論としてはIE8では<tr>指定でスタイル等を適応させることができないのではないかと思いました。 本当に<tr>にスタイルを適応させることはできないのでしょうか。 また、Jqueryを用いた対処方法があれば教えていただきたいです。 お手数ですが、アドバイスをお願いいたします。

  • テーブルの行削除について

    以前、テーブルの行追加について教えてもらい出来ましたが 逆に、追加された行を削除する方法を教えてください。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS"> <TITLE>行追加・削除</TITLE> </HEAD> <BODY> <TABLE BORDER="1" id="Table1"> <TR> <TH>タイトルA</TH> <TH>タイトルB</TH> </TR> <TR> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="A" VALUE=""></TD> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="B" VALUE=""></TD> </TR> </TABLE> <INPUT TYPE="button" VALUE="行追加" onclick="addRow()"> <INPUT TYPE="button" VALUE="行削除"> <script language="JavaScript"> function addRow() { var tbl = document.getElementById("Table1").firstChild; if (!tbl.tagName) { tbl = document.getElementById("Table1"); } var tr = document.createElement("tr"); var td1 = document.createElement("td"); var tx1 = document.createElement("input"); tx1.setAttribute("type","text"); tx1.setAttribute("size","18"); tx1.setAttribute("maxlength","18"); tx1.setAttribute("name","Cn"); tx1.setAttribute("value",""); td1.appendChild(tx1); var td2 = document.createElement("td"); var tx2 = document.createElement("input"); tx2.setAttribute("type","text"); tx2.setAttribute("size","18"); tx2.setAttribute("maxlength","18"); tx2.setAttribute("name","Cn"); tx2.setAttribute("value",""); td2.appendChild(tx2); tr.appendChild(td1); tr.appendChild(td2); tbl.appendChild(tr); } </script> </BODY> </HTML>

  • マウスカーソルを乗せた時にテーブルの行の色を変える

    マウスカーソルがテーブルの行の上に来た時に行の色を変えたくて 以下のようにCSSとHTMLを書いてみました。 しかし、何の変化もありませんでした。どこが悪いのかわかりますでしょうか。 【CSS】 table tr:hover { background:red; } 【HTML】 <html> <head> <script type="text/javascript" src="./jquery-1.9.1.js"></script> <link rel="stylesheet" href="test.css" type="text/css"> <script> </script> </head> <body> <table border="1"> <thead> <tr> <th>名前</th> <th>金額</th> </tr> </thead> <tbody> <tr> <td>abc</td> <td>3000</td> </tr> <tr> <td>xyz</td> <td>100</td> </tr> <tr> <td>myk</td> <td>20000</td> </tr> </tbody> </table> </body> </html>

    • ベストアンサー
    • CSS
  • PHP POSTについて質問です

       こんにちわ PHP初心者です。 今ショッピングカートづくりをしています。 そこでピンチなのでご指導お願いいたします。 商品を発送する送り先情報を必要な数だけonclickで一件一件増やしもらって その情報を次のページで確認してもらうようにしたいのですが <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> var tbl_cnt = 1; jQuery(document).ready(function($) { $('#add_btn').click(function() { var original = $('#form_set_' + tbl_cnt); tbl_cnt++; $(original).clone().insertAfter(original) .attr('id', 'form_set_' + tbl_cnt) .find('label').each(function(idx, obj) { $(obj).attr('for', $(obj).attr('for').replace(/_[0-9]+$/, '_' + tbl_cnt)); }).end() .find('input').each(function(idx, obj) { $(obj).attr({ 'id' : $(obj).attr('id').replace(/_[0-9]+$/, '_' + tbl_cnt), 'name' : $(obj).attr('name').replace(/_[0-9]+$/, '_' + tbl_cnt) }).val(''); }); }); }); </script> <form action="shop_check.php" method="post"> <table id="form1"> <tbody> <tr> <td><label for="okuriname">氏名</label></td> <td><input type="text" id="okuriname" name="okuriname[$i]"></td> </tr> <tr> <td><label for="okuriemail">email</label></td> <td><input type="text" id="okuriemail" name="okuriemail"></td> </tr> <tr> <td><label for="okuripostal1">郵便番号</label></td> <td><input type="text" id="okuripostal1" name="okuripostal1">-</td> <td><input type="text" id="okuripostal2" name="okuripostal2"></td> </tr> <tr> <td><label for="okuriaddress">住所</label></td> <td><input type="text" id="okuriaddress" name="okuriaddress"></td> </tr> <tr> <td><label for="okuritel">電話番号</label></td> <td><input type="text" id="okuritel" name="okuritel"></td> </tr> </tbody> </table> <input type="button" value="送り先の追加" id="add_btn"><br> <input type="submit" value="送信" name="submit"> </form> この後どのようにしたら次のページで 複数の情報を受け取ればいいのでしょうか? (javascriptはweb上にあったものを引用してます。) javascriptの事もわかっていませんなのでお手柔らかにおねがいします。

    • ベストアンサー
    • PHP

専門家に質問してみよう