• ベストアンサー

jqueryで<tr>の制御

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

  • sonpu
  • お礼率0% (0/14)

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

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.2

今現在、phpがどういうhtmlを吐き出してるかわからんけど、 HTMLに明示的に書いてないタグも常に矛盾が起きないように補正されます。 <tr>や</tr>の追加時も矛盾が起きないように同時に</tr>や<tr>が自動的に補填されますので、開始タグ、終了タグを個別に追加ってのはできません。 tableみたいな構造が複雑なものはbeforeやafter、wrap系を使うのではなくtable全体を再構成するつもりでスクリプトを書かないとうまくいかないと思いますよ。 論理構造を操作するJavascriptよりも、テキストとして操作できるphpをいじった方が楽だと思うけど。 （規定のtdごとにtrを挟むなんてのは定番じゃないかな）

sonpu
質問者

補足

やっぱりブラウザの調節が絡んでたのですね。 そのような気がしていました。 おっしゃる通り、PHPをいじる方が楽ですね。

その他の回答 (2)

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

#1です。 ＞<td>部のみはSQLから項目をひっぱりだしてPHPでループ生成 ＞しています 変化する要因がそれだけなら、なおさらのこと、作成時に調整されたソースを吐き出すのが正論ではないでしょうか？ 百歩譲って、無理やりjavascriptで後からやるにしても、構造が不明のテーブルを解析していじるより、新しくテーブルを作成して、既存の<td>を順に置き直して、最後にテーブルごと差し替えるほうが簡単では？ で、これって、最初に作成するときとほとんど同じロジックだし、手間としては（大したこと無いにしても）tdを洗い出したり、テーブルを作成したりする分が重複してしまうので、無駄といえるのでは？ それに、クライアント側でスクリプトをオフにしていれば、メチャクチャな（作成者の意図と違う）表示になってしまうというリスクを残すことになりますし…

sonpu
質問者

補足

クライアント側で～のリスクは承知でしたが、あまりお勧めでないようですね。 この手法は諦めます。

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

＞<td>の数が増えたり、順番も変わるので～～ どのようにして、数が変動するのでしょうか？　変動するときに同時に要素も調整するようにしておくのが正解では？ というよりも、そんなに変動するのならテーブルを使用せずにリスト形式などで並べておいて、1行に2要素ずつ入るようにCSS等で制御しておくほうが遥かに簡単では？ そうすれば、順番が変わろうが、数が増減しようが何も調整する必要がないと思いますが…？ 例えば、 <html> <head><title>test</title> <style type="text/css"> ul.hyou { width:300px; list-style:none; } ul.hyou li { width:150px; float:left; } </style> <body> <ul class="hyou"> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> </ul> </body> </html>

sonpu
質問者

補足

divなどでレイアウトしてもよいのですが、それぞれの高さがまちまちなので左寄せだとうまく2個ずつで送られないことがあり、テーブルを使っています。 <td>部のみはSQLから項目をひっぱりだしてPHPでループ生成しています。 できるだけphpをいじりたくないので、ブラウザ側でなんとかできないかな、というところです。 よろしくお願いします。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 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だけでもかまいませんので、ご教授ください。

  • テーブルの背景をマウスオーバーで変える

    お世話になります よろしくお願いします phpMyAdminをみてやってみようと思ったのですが テーブルのセルをマウスオーバーで背景の変更はできないでしょうか？ FireFoxだとうまくいくのにIEだとうまくいきません。 IEは未対応と聞いたのですが 実際phpMyAdminでは動いています。 どうやれば一緒のことができるのでしょうか？ phpMyAdminからそれっぽいソースは見つけたのですが うまくいきませんでした <style type="text/css"> /* odd table rows 1,3,5,7,... */ table tr.odd th, table tr.odd { background-color: #CCCCCC; } /* even table rows 2,4,6,8,... */ table tr.even th, table tr.even { background-color: #666666; } /* hovered table rows */ table tr.odd:hover, table tr.even:hover, table tr.odd:hover th, table tr.even:hover th, table tr.hover th, table tr.hover { background-color: #FFF000; } --> </style> <body> <table> <tr class="odd"><td>マウスを乗せると背景色が変わる</td><td>マウスを乗せると背景色が変わる</td></tr> <tr class="even"><td>マウスを乗せると背景色が変わる</td><td>マウスを乗せると背景色が変わる</td></tr> </table> 以上よろしくお願いします

    • ベストアンサー
    • HTML
  • 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"); }); }); というスクリプトを用意しましたが、 同時に動かそうとしても動きません。 何か方法は無いでしょうか？ 初期状態では色分けをされていますが、追加した段階で追加された行には適応されません。 詳しいかた教えていただけるでしょうか？

  • 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>"としてもスタイルが適応されませんでした。 このことから個人的な結論としてはIE８では<tr>指定でスタイル等を適応させることができないのではないかと思いました。 本当に<tｒ>にスタイルを適応させることはできないのでしょうか。 また、Jqueryを用いた対処方法があれば教えていただきたいです。 お手数ですが、アドバイスをお願いいたします。

  • tableのtr要素をドラッグ＆ドロップで任意に入れ替え、その順番を取

    tableのtr要素をドラッグ＆ドロップで任意に入れ替え、その順番を取りたいです。 jqueryのSortableプラグインを調べ、これならできそうとプログラムを組み、 trの一行ごとならばできました。 やりたいことは、rowspanで連結されている<tr>を2行以上まとめて１つの要素とみなし、 入れ替えたいのですが、 jqueryのSortableでできますでしょうか？ <table> <tr><td rowspan="2">一行目</td><td>あいう</td> <tr><td>えお<td></tr> <tr><td rowspan="2">二行目</td><td>かきく</td> <tr><td>けこ<td></tr> </table> <table>を入れ子にすれば実現はできそうですが、 ちょっとCSSの関係もあり、その方法を採用するのは難しい気がしています。

    • ベストアンサー
    • AJAX
  • jQuery.eachの使い方について教えてください。

    jQuery.eachの使い方について教えてください。 やりたいことの目的として テーブルの行に触れたとき背景色を変更したいということです。 ただ、ちょっとやっかいなのは１行に触れたら２行の色を変更させたいというところにあります。 tr1に触れたらtr1とtr2に着色 tr2に触れたらtr1とtr2に着色 tr3に触れたらtr3とtr4に着色 tr4に触れたらtr3とtr4に着色 ・ ・ ・ といった感じです。 $(＠＠＠).hover(function(){ $(this).css({ backgroundColor:'#ff47a3', color:'#ffffff' }); },function(){ $(this).css({ backgroundColor:bgColor, color:color }); }); }); ＠＠＠の部分をうまく配列で書く方法はないでしょうか？ 配列を使えばいいかとおもうのですが・・・ 通常2行を選択するのであれば $('#tr1,#tr2').hoverでいいかと思ってはいますが・・・ 配列ではどのようにしてあげたらいいのでしょうか？ よろしくお願いいたします。 <table> <tr id=tr1> <td></td><td></td> </tr> <tr id=tr2> <td></td><td></td> </tr> <tr id=tr3> <td></td><td></td> </tr> <tr id=tr4> <td></td><td></td> </tr> <tr id=tr5> <td></td><td></td> </tr> <tr id=tr6> <td></td><td></td> </tr> </table>

  • 文字色を変更するCSSが効かない

    テーブルのヘッダ部分の文字色を変更したくて下記CSSとHTMLを記述したのですが 文字色を変更するcolorが効かなくて困っています。 背景色は変更されるのでbackgroudは効いています。 原因はお分かりになりますでしょうか。 【CSS】 table thead tr td { clolor:red; background:black; } 【HTML】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <link rel="stylesheet" href="test2.css" type="text/css"> <script> </script> </head> <body> <table> <thead> <tr> <td>名前</td> <td>金額</td> </tr> </thead> <tbody> <tr class="odd"> <td>abc</td> <td>3000</td> </tr> <tr class="even"> <td>xyz</td> <td>100</td> </tr> <tr class="odd"> <td>myk</td> <td>20000</td> <tr class="even"> <td>xyz</td> <td>100</td> </tr> </tbody> </table> </body> </html>

    • ベストアンサー
    • CSS
  • jQuery、tdマウスオーバー、行の先頭th操作

    jQueryについて質問です。 <!DOCTYPE html><html><head> <style type="text/css"> th.e {background-color:orange;} </style> </head><body> <table border='1' cellspacing='0'> <tr> <th>test</th> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <th>test</th> <td>A</td> <td>B</td> <td>C</td> </tr> </table> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $("table td").mouseover(function(){ $(this).parent().find("th").toggleClass("e"); }).mouseout(function(){ $(this).parent().find("th").toggleClass("e"); }); </script> </body></html> 上記で動いて嬉しかったのですが、もやもやしています。 this → parent → find が遠回りでスカッとしません。 スカッとする方法はありますか？

  • jqueryでテーブル行のマウスアウト時の動作

    jqueryでテーブル行をマウスオーバー、マウスアウトした時に行の背景色が 変更されることを期待して下記のようなサンプルを作成してみました。 マウスアウトした時に背景色が変わるようにサンプルを書いて見ましたが 変わりませんでした。どこが悪いかお分かりになりますでしょうか。 また、下記サンプルでマウスアウトした時に色が変わった行の行番号、及び行のオブジェクトを 取得するにはどう記述すればよろしいでしょうか。 <html> <head> <meta charset="UTF-8" /> <title>属性フィルター</title> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function() { alert("a"); $("table tr").mousout( function() { alert("c"); $(this).css("background-color", "red"); } ); }); </script> </head> <body> <table border="1"> <tr> <td>aiueo</td> </tr> <tr> <td>kakikukeko</td> </tr> <tr> <td>sasisuseso</td> </tr> <tr> <td>tatituteto</td> </tr> </table> </body> </html>

  • nth-childをtrとtdに同時に使うと...

    CSS3のnth-childを使って添付画像のような表を作りたいと思っています。 条件は以下です。 ・奇数行、偶数行で背景色を変える。 ・C列だけ背景を透過させる。 ・classは使わない。 # クラスを使わないのはnth-childの勉強のためで、特に意味はないです。 # 特定列だけ強調させる技はExcelでもよく使うので、楽にできればいいなぁ程度。 以下のようなコードを書いてみましたが、背景透過されませんでした。 これは、<TR>の宣言が<TD>の!importantよりも優先されるということでしょうか？ <html> <body bgcolor="#ddccbb"> <style type="text/css"> tr:nth-child(odd) { background:#aaFFFF} tr:nth-child(even) { background:#ddffFF} td:nth-child(3) { background:transparent!important} </style> <table border=1> <tr> <td>A1</td> <td>B1</td> <td>C1</td> <td>D2</td> </tr> <tr> <td>A2</td> <td>B2</td> <td>C2</td> <td>D2</td> </tr> <tr> <td>A3</td> <td>B3</td> <td>C3</td> <td>D3</td> </tr> <tr> <td>A4</td> <td>B4</td> <td>C4</td> <td>D4</td> </tr> </table>

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する