- ベストアンサー
多機能なテーブルの実現方法
現在、WindowsXP、PHP、PostgreSQLでwebアプリケーションを作成しており、DBから読み込んだデータを一覧表示する部分があります。 表示のみではなく、テキストボックス、コンボボックスなども組み込まれており、行の追加、削除、テキストボックス、コンボボックスの内容を変更することが可能です(更新ボタン押下で編集した内容がDBに反映されます)。 このtable部分に「ヘッダ固定の縦スクロール」「同横スクロール(これはヘッダ固定でなくても可)」「ヘッダクリックでソート」という機能を付加したいのです。 出力部分は<tr><td>～</td></tr>でデータを繰り返し出力しており、xml等は使用していません。現在のソースに対してできるだけ修正部分を少なく済ませたいです。フレームワークはprototype.jpを使っているので、これに依存するものは使用可能です。もちろん、フレームワーク依存でないものも可能です。 ttp://tetlaw.id.au/view/blog/table-sorting-with-prototype/を試してみましたが、スクロールさせようとすると、テキストボックスなどがセルに存在する場合にヘッダとデータ部分にずれが生じてしまいます。 何かよい方法、紹介サイトなどありましたら、教えていただきたいと思います。よろしくお願いします。
- danmakuusu
- お礼率66% (8/12)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
テーブル関連の多機能ライブラリについて、こちらにまとめてあります。デモページのリンクもありますのでご参考にしてください。 http://d.hatena.ne.jp/cyokodog/20080720/1216569757 ちなみにヘッダ部分の固定のみでしたらCSSのみでもできます。 http://d.hatena.ne.jp/cyokodog/20080909/tableHeadFix03 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> th { background: #333; color:#fff; } td { background: #eee; } th,td { padding:2px; width: 100px; } .wrap1 { position: relative; padding-top: 24px; width: 100%; } .wrap2 { overflow: auto; height: 100px; } thead tr { position: absolute; top: 0; left: 0; } </style> </head> <body> <div class="wrap1"> <div class="wrap2"> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th>no</th> <th>lang</th> <th>script?</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>javascript</td> <td>script</td> </tr> <tr> <td>1</td> <td>javascript</td> <td>script</td> </tr> <tr> <td>1</td> <td>javascript</td> <td>script</td> </tr> <tr> <td>1</td> <td>javascript</td> <td>script</td> </tr> <tr> <td>1</td> <td>javascript</td> <td>script</td> </tr> <tr> <td>1</td> <td>javascript</td> <td>script</td> </tr> <tr> <td>1</td> <td>javascript</td> <td>script</td> </tr> </tbody> </table> </div> </div> </body> </html>
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
テーブルのヘッダを固定して中身をスクロールするには別テーブルに するしかないですね。 そのさい各項目の幅をあわせるには、window.onloadのイベントで、 各テーブルの各列幅のoffsetWidthの最大値をそれそれの幅に設定すると よいでしょう
関連するQ&A
- テーブルデータのスクロール
いつもお世話になっています。 テーブル作成時に、ヘッダ部分のみを固定し、 データ部分をスクロールしたいと思い、調べた結果 <thead>、<tbody>、<tfoot> タグ系を使うまでは分かりました。 が、<tbody>部分は、スクロールせずにただ普通に表示されているだけでした。 OKwebで検索し、サンプルを作成してくださった方がいたので 試しにソースをコピーして、ローカルで試してみましたがダメでした。 ↓ちなみにソースです。width や height の値をいろいろ変えたりはしました。↓ <html> <head> <title>TbodyScroll</title> </head> <body> <table border="1" width="200px" height="100px"> <thead> <tr><th>M1</th><th>M2</th><th>M3</th></tr> </thead> <tfoot> </tfoot> <tbody style="width:180px;height:60px;overflow:scroll"> <tr><td>D1-1</td><td>D1-2</td><td>D1-3</td></tr> <tr><td>D2-1</td><td>D2-2</td><td>D2-3</td></tr> <tr><td>D3-1</td><td>D3-2</td><td>D3-3</td></tr> <tr><td>D4-1</td><td>D4-2</td><td>D4-3</td></tr> <tr><td>D5-1</td><td>D5-2</td><td>D5-3</td></tr> <tr><td>D6-1</td><td>D6-2</td><td>D6-3</td></tr> <tr><td>D7-1</td><td>D7-2</td><td>D7-3</td></tr> </tbody> </table> </body> </html> 自分なりに位置を固定して試したり、他のサイトも検索してみましたが、<tbody>部分を実際にスクロール するサンプルソースがみつからず、ここに質問させていただきました。 ご教授お願いいたします。
- ベストアンサー
- HTML
- テーブルのヘッダ部分固定でデータ部分をスクロールしたい
テーブルのヘッダ(最初のTR部分)が固定でデータ部分(ヘッダ以下のTR)がスクロールにより移動できるようにしたいのですが可能でしょうか？ フレーム分割で擬似的に作ることは可能と思いますがそれ以外で実現方法を探しております。 よろしくお願いします。
- ベストアンサー
- HTML
- tableのヘッダを固定したい
IE6,7,8でテーブルのヘッダを固定したいのですが うまくいきません。 条件は以下のとおりです。 ・width: ?%として大きさを可変にする。 ・ヘッダを固定する。 ・ボディにはスクロールバーをつける これまでwidthは固定で作成してきたのですが 可変にする場合どのようなcssにすればよいのでしょうか。 よろしくお願いします。 <div id="container"> <div class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> </tr> </thead> </table> </div> <div class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> </tr> </tbody> </table> </div> </div>
- 締切済み
- HTML
- テーブルの最後の行であるか判別したい
テーブルの中にあるテキストボックスのonchangeイベントの中で、このテキストボックスが最後の行（<tr>レベル）であることを知るにはどうすればいいでしょうか？ <table> <tr><td><input type="text" onchange="islastline()"></td></tr> <tr><td><input type="text" onchange="islastline()"></td></tr> <tr><td><input type="text" onchange="islastline()"></td></tr> </table> この場合一番下のテキストボックスに入力したときだけTRUEを返してほしいのです。
- ベストアンサー
- JavaScript
- JavaScriptでテーブルの内容を抽出
JavaScriptを使いIEで動かしたいです。 IEのHTMLファイルに一つのテーブルが有ります。 そのテーブルの1列目のみをコンボボックスに抽出させることはできるでしょうか？ きっかけのイベントはなんでも構いません。又、テーブルは何の変哲もない下記のようなテーブルです。 <TABLE BORDER=1> <TR> <TD>A</TD><TD>123</TD><TD>123</TD> </TR> <TR> <TD>B</TD><TD>123</TD><TD>123</TD> </TR> <TR> <TD>C</TD><TD>123</TD><TD>123</TD> </TR> </TABLE> 上記の例ではA,B,Cをコンボに出したいのです。 お知恵をお貸しください。
- ベストアンサー
- JavaScript
- javaスクリプトで、テーブルのセルの色を変更する方法
javaスクリプト初心者です。ご指導宜しく御願い致します。 コンボボックスで指定の文字列が選択された場合に、 ある場所のバックグラウンドカラーを変更したいと思っているのですが 可能でしょうか？ オンチェンジのイベントで何かしらの判断をさせるのかとは 思うのですが・・。 （例） コンボボックスAが選択された場合に、 TEST02と表示させている部分の背景色を変更。 －－－－－－－－－－－－－ | TEST01 | A ▼ | －－－－－－－－－－－－－ | TEST02 | TEST | －－－－－－－－－－－－－ <TABLE BORDER="1"> <TR> <TD>TEST01</TD> <TD> <SELECT NAME="TEST"> <OPTION value="A">A</OPTION> <OPTION value="B">B</OPTION> </SELECT> </TD> </TR> <TR> <TD>TEST02</TD> <TD> <INPUT TYPE="text" value ="test"> </TD> </TR> </TABLE BORDER> 大変申し訳ありませんが、ご指導のほど宜しく御願い致します。
- ベストアンサー
- JavaScript
- テーブル<TR></TR>の処理について
次の様な処理を行いたいのですが方法をご教授下さい。 DBのテーブルに10個のレコードがあります。 すべてのレコードの情報を表示させます。 HTMLのテーブルは2列5行で表示させたい。 つまりHTMLで下記のように表示したい。 <TABLE> <TR> <TD>データ1</TD> <TD>データ2</TD> <TD>データ3</TD> <TD>データ4</TD> <TD>データ5</TD> </TR> <TR> <TD>データ6</TD> <TD>データ7</TD> <TD>データ8</TD> <TD>データ9</TD> <TD>データ10</TD> </TR> </TABLE> これをPHPで <? $con = mysql_connect("$dbhost", "$dbuser", "$dbpass"); mysql_select_db("$dbname"); $sql= "select * from DB_name"; $rs=mysql_query($sql); ?> <TABLE> <TR> <? while($row=mysql_fetch_array($rs)){ ?> <td><? echo $row['data'] ?></td> <?}?> </tr> </table> のように単純にデータを取り出すことは出来るのですが、 データを5つ毎に</TR><TR>を出す方法が分かりません。 このような処理は皆様はどのように行っていますか。 基本的な質問で申し訳ありませんが、ご教授下さい。 よろしくお願い致します。
- ベストアンサー
- PHP
- テーブル<TD>の幅の固定
テーブルのTD幅をWIDTHで指定しているのですが、入力するテキストによって幅が動いてしまいます。 例） <table width="50"> <tr> <td width="10">AAAAAAAAAAAAAAAA</td> <td width="40">AA</td> </tr> </table> というような場合、幅の狭い方のセル幅が広くなってしまいます。 また逆に広い方が何度も改行させられて出力されたり、出力させたいテキストによって、いかようにも幅が変更されてしまいます。 他のサイトなども色々調べてみて、半角英数字の場合は特に顕著ということも書かれてあったのですが、半角英数字の出力は必須なんです。 （全角文字の場合でも、完全に固定とはなりませんでした） やっぱり完全にテーブルのセル幅を固定するのはムリなのでしょうか？ 何か解決方法はありますでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- テーブルをスクロールさせるときのスクロールの位置
お世話になります。 IE限定の質問です。 テーブルのヘッダを固定してスクロールバーを右に付けるとします。 ↓例↓ =================================== <html> <head> <style type="text/css"> .FreezHeader { background-color:#ffffff; position:relative; top:expression(this.offsetParent.scrollTop); z-index:10; } </style> </head> <body> <div id="divFrame" style="overflow:auto; position:relative; width:100%; height:100px;"> <table cellspacing="0" cellpadding="0" width="100%" border="1"> <tr class="FreezHeader"><th>あ</th><th>か</th><th>さ</th></tr> <tr><td>い</td><td>き</td><td>し</td></tr> <tr><td>う</td><td>く</td><td>す</td></tr> <tr><td>え</td><td>け</td><td>せ</td></tr> <tr><td>お</td><td>こ</td><td>そ</td></tr> <tr><td>あ</td><td>か</td><td>さ</td></tr> <tr><td>い</td><td>き</td><td>し</td></tr> <tr><td>う</td><td>く</td><td>す</td></tr> <tr><td>え</td><td>け</td><td>せ</td></tr> <tr><td>お</td><td>こ</td><td>そ</td></tr> </table> </div> </body> </html> =================================== 上記のような HTML を書いた場合， 【下の図】↓の「Ａ」のように表示されます。 「Ａ」のようにではなく スクロールバーの位置(TOPの位置)をヘッダの下から開始させたいのです。 できれば 【下の図】↓の「Ｂ」のような感じで それが難しいとした場合， 【下の図】↓の「Ｃ」のような感じです。 このように表示させる方法を教えていただきたく思います。 IEのみで使えれば良いので， 他のブラウザでの見え方は考えなくて良いです。 ただ， IE 5.5 や 6 などなるべく低いバージョンでも見えるようにと なるべく JavaScript の使用は避けて なおかつ，なるべくシンプルな方法が希望です。
- ベストアンサー
- HTML
- テーブル内で改行を防ぐには
td要素内に記述したテキストは通常、自動改行されますが、数字の場合自動改行されません。そのため横スクロールする必要があったり、サイトデザインがくずれたりします。 自動改行をされるようにするにはどうしたら良いでしょうか。 例えば、下記のようなソースです。 <table><tr><td> 012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789</td></tr></table>
- ベストアンサー
- HTML
