ベストアンサー

多機能なテーブルの実現方法

2008/10/05 02:02

現在、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）
専門家の回答

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

ベストアンサー

cyokodog
ベストアンサー率56% (13/23)

2008/10/06 10:03 回答No.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>