top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_121

superTables.js:ヘッダと最初のセル固定させて使い勝手抜群テーブル! ・・・ 【JavaScript】

 2008-07-17
 はい。
 さきほど投稿しました「紹介リンク集
 見ていただけましたでしょうか?

 今まで(これからも)このブログで紹介する
 すぐれたサービスやサイトを ここにまとめてゆきますので、
 どうぞご利用ください。
    ・・・ほとんど自分用、ですがね。

 さて、
 そこで多くの方は気付かれた?でしょうか?
 (わざわざテーブル構成にしていたのですが)

 ね! 1番上のTR行と
     1番右のTD列が固定されているでしょう。

 左右に情報量の多い表作成の場合
 このようにExcelのような動きを設定できると非常に便利です。

 ※昔はフレーム利用して
   テーブル長さ固定させ、フレーム間のスクロール連動
   なんてことやってましたねぇ。
   (今でもイントラの管理画面とかでたまにやりますが)

 今回はね、
 こりゃあね。大変だったのです  ・・・ なんてのは冗談で
                        あっと言う間に実現。

 それは
     >>> superTables.js  のおかげです!

   ▼

[提供URL:] http://www.matts411.com/main/super_tables

[配布物:]superTables.js 本体、スタイルシート4種類、サンプルHTML
 ※色味を変えられる色別のスタイルシートが付属

[ダウンロード:] 上記URLにアクセスし
Download:

 からダウンロード

 > 解凍
   ※問題なく終了
    ・サンプルHTMLを開けばすぐに確認できます

[実施:]
1:使用するHTMLのヘッダに以下を記述

CSS(空色のスキン使う時:私)
<link href="***/superTables_Sky.css" rel="Stylesheet" type="text/css">

JavaScript
<script type="text/javascript" src="***/superTables.js"></script>

 ・*** は適時環境に合わせて

2:上記の場所に
 superTables_Sky.css、superTables.js をアップロード

3:使用したいテーブルで
<div class="skinSky">
<div class="fakeContainer">
<table id="linktable">

などとすればいいはず?ですが
うまくゆかなかったので
最初は skinCon とデフォルトを設定、最後に入れ替える手法をとりました。
このあたりもサンプルみればすぐわかります。

4:カスタマイズはちょっとだけ
css の英字指定部分をコメントアウト
tr や td 部分に height:22px; を組込
※こうしないと、IEで表示が崩れる

ぐらいです

 超簡単!

 サンプルは 紹介先リンク集!

 ※なお、ずぼらの私は今後、情報を登録するときに楽なように
  データ自体を JavaScriptの変数にしていますが、ね。
  これは superTables.js とは直接関係ありません。あしからず。

superTables.js
すばらしい、ありがとうございました。

superTables.js



FC2ブログランキングにほんブログ村 IT技術ブログ Webサイト構築へブログ王ランキング人気ブログランキング人気ホームページランキングへ
commentsコメント
これは便利そうですね!

私も過去にフレームを駆使して作ったことがありましたが、これがあればそんな必要はないですね。

数値を扱うような資料をよく作るのでその時試してみます。


追伸
いつも読ませて頂いているので勝手にトップページにリンクさせてもらいました。
もしご迷惑でしたら削除しますのでトップページメールフォームよりご連絡ください。


【2008/07/18 17:26】 | トモヒロ #pBoZlR9Y | [edit]
コメントありがとうございます。
いいですよねぇ。随分前からあったらしいのですが・・・
もっと早く知っていれば、どれだけ
仕事が楽になってたか・・
※リンクありがとうございます。
 それでは私も
 リンクに入れさせていただきます。
 あまり「相互リンク」とかはしていないのですが
 「縁はいいもの」・・ですからねぇ。
【2008/07/19 11:46】 | metaboy #- | [edit]
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/121-f4479bc7
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。