- ベストアンサー
jqueryで<tr>の制御
jqueryを用いて、<td>2個ずつを<tr>でくくるように自動制御したいです。 <td>の数が増えたり、順番も変わるのでそれを1段に2個ずつで配置するのが目的です。 <head>内に $("td:odd").before("<tr>"); $("td:even").after("</tr>"); としたのですが、なぜか上手くいきません。 アドバイスお願いします。
- sonpu
- お礼率0% (0/14)
- JavaScript
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
今現在、phpがどういうhtmlを吐き出してるかわからんけど、 HTMLに明示的に書いてないタグも常に矛盾が起きないように補正されます。 <tr>や</tr>の追加時も矛盾が起きないように同時に</tr>や<tr>が自動的に補填されますので、開始タグ、終了タグを個別に追加ってのはできません。 tableみたいな構造が複雑なものはbeforeやafter、wrap系を使うのではなくtable全体を再構成するつもりでスクリプトを書かないとうまくいかないと思いますよ。 論理構造を操作するJavascriptよりも、テキストとして操作できるphpをいじった方が楽だと思うけど。 （規定のtdごとにtrを挟むなんてのは定番じゃないかな）
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
#1です。 ＞<td>部のみはSQLから項目をひっぱりだしてPHPでループ生成 ＞しています 変化する要因がそれだけなら、なおさらのこと、作成時に調整されたソースを吐き出すのが正論ではないでしょうか？ 百歩譲って、無理やりjavascriptで後からやるにしても、構造が不明のテーブルを解析していじるより、新しくテーブルを作成して、既存の<td>を順に置き直して、最後にテーブルごと差し替えるほうが簡単では？ で、これって、最初に作成するときとほとんど同じロジックだし、手間としては（大したこと無いにしても）tdを洗い出したり、テーブルを作成したりする分が重複してしまうので、無駄といえるのでは？ それに、クライアント側でスクリプトをオフにしていれば、メチャクチャな（作成者の意図と違う）表示になってしまうというリスクを残すことになりますし…
補足
クライアント側で～のリスクは承知でしたが、あまりお勧めでないようですね。 この手法は諦めます。
- fujillin
- ベストアンサー率61% (1594/2576)
＞<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>
補足
divなどでレイアウトしてもよいのですが、それぞれの高さがまちまちなので左寄せだとうまく2個ずつで送られないことがあり、テーブルを使っています。 <td>部のみはSQLから項目をひっぱりだしてPHPでループ生成しています。 できるだけphpをいじりたくないので、ブラウザ側でなんとかできないかな、というところです。 よろしくお願いします。
補足
やっぱりブラウザの調節が絡んでたのですね。 そのような気がしていました。 おっしゃる通り、PHPをいじる方が楽ですね。