机が折りたためなくて困っている話。

別にインテリアとか家具の話じゃない。
スクリプトのお話。
HP(ホームページ)作成要素の中に、tableタグというモノがあります。
知っている人は、何を今更・・・と思うかもしれませんが、
嘲笑って聞いてやって下さい。

そもそもHPを作るには、HTMLと言う言語みたいな書式で書く必要があります。
んで、
その命令文みたいなのを書くのに< >の中に決まった言葉を入れるのね。
< >←これがタグ。
ブログとかでも、文字を太くしたりのタグ支援がありますよね。
アレですアレ。
その中の、tableタグってゆーのは、表を作るタグです。

先日より、HPのリニューアルをやってまして。
不要なのはさっくり消去して、
必要なのは入れ込んで。
ブログやる前に使ってた日記CGIなんかは、
もう使ってないから、この際スッキリ撤去。
・・・なんて、やってたんですよね。
そしたら手つかずに残ったのが゛、素材配布のページで。
や、えーと・・・その・・・。
やる気はあったんですけどね。
面倒くさぃぇ・・・量があるので途方に暮れてたんですよ。
そう、BlogPetの背景素材。
アレって悩みのタネで。

表にするとしても、ダラダラ下に長くなるし、
フレームで横に割るのも本意じゃない。
そもそもGoogleさん、フレームの片割れページにだけリンク貼ったりするから、
どーもおかしなコトになるし。
かと言って、上に割るのも・・・既に上にはメニューが展開しているので、
あれやこれやと、途方に暮れていて。
なので、tableの折りたたみスクリプトを導入しようとか考えたのでした。

これが。
実は、導入しようとかって、簡単に言える代物じゃないw
先に書いたHTMLだけでは、処理出来ません。
別の言語JavaScriptを導入する必要があります。
しかし。
ンな難しいコトは、全然ダメです、私。
・・・とも言っていられないので、数日間悪戦苦闘。

リストタグの開閉ってのは、実は比較的簡単に出来る。
しかし。
どーもtableは勝手が良くない。
thでタイトルくくって、trと進むけど、二段目からが、ナゼか表示しない。
しかも、閉まってる時も、ビミョウにセルが残ってる
なんで???
と、悩むこと丸2日。
結局その方法はあきらめたw
ダメだなぁ。
うーん・・・・・。

リストタグで始めて、中にtableを入れ込む方法も考えたんだけど、
li使っちゃうと、中のtableが一段下がっちゃうんだ。
段面が合わないのが気持ち悪くて。
しかも、ぶっちゃけ他のcss絡みで、Pタグが使いにくいとか何とか。
どーしようかと悶々。

仕方ないから、tableの中に、tableを入れ込むことにした。
ホントはあんましスッキリしない方法だから、イヤなんだけど。
他に方法が思いつかなかったから、仕方がない。
一段目の開閉は出来るんだから、
その中に詰め込んじゃえって言うコトなんだな。

以下、誰かの参考になるかもしれない可能性も考えたメモ。
あまり推奨はしない。

<!--
function th(id){
if(document.all)OBJ = document.all(id).style; else if(document.getElementById)OBJ = document.getElementById(id).style; if(OBJ) OBJ.display=='none'?OBJ.display='':OBJ.display='none';
}
//-->

これを最初に書いて、なんちゃら.jsって別ファイルを作る。
(なんちゃら、の部分には英数文字でファイル名をつける。)
これはどこかから拾ってきたJSを改変したモノ。
(ドコで拾ってきたかはゴメンナサイ、忘れましたm(_ _;)m)
HTMLの中に埋め込んでもいいけど。
後々いじるかもしれないことを考えたら、cssファイルのように別置きした方が得策。
で、HEADタグ内に、リンクを入れる。
<script language="JavaScript" src="./なんちゃら.js"></script>

そしたら、tableタグで、表を作る。
<table border="1" width="300px" align="center">
<tr><th bgcolor="#ffffff"><a href="javascript:void(0)" onclick="th('rcomment1')">タイトル1</a></th></tr>
<tr style="display:none" id="rcomment1"><td>
<table border="1" width="100%" align="center">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
<td>1-5</td>
<td>1-6</td>
</tr></table>
</td></tr>
<tr><th bgcolor="#ffffff"><a href="javascript:void(0)" onclick="th('rcomment2')">タイトル2</a></th></tr>
<tr style="display:none" id="rcomment2"><td>
<table border="0" width="100%" align="center">
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
</tr></table>
</td></tr>
</table>

サンプルはこんな感じ→【上のテーブルサンプル

一段目のセルに、折りたたみたい表すべて突っ込んである。
(サンプルでは、わかりやすいように一段目の表はボーダー表示してある。)
ポイントは段ごとに、th('rcomment1')などと、数字とか別のidを入れてあげること。
じゃないとJSの特性上、最初に読み込んだ部分しか動作しません。
と、ココまで来て気付いた。


開けたら閉めたい!


一つ開けて、次のを開ける時、
前に開けたのを、自動的に閉めたい。
出来れば、開け閉めの画像マークもつけたい。
が、が、が。
頑張ったけど。
さすがにそこまでは出来なかったよ先生。
なので、この作業はココでおしまい。
ココまででも使える方がいらっしゃいましたら、
参考になさって下さい。

願わくば。
開け閉め出来て、開閉出来るちゃんとしたスクリプト、
どなたかが教えて下さることを願いますw
と言うか、すっっっごく教えて欲しい(涙;

他力本願w

出来たページは↓↓
【BlogPet短冊背景】
↑↑これです。

ふぅ。
あとで、背景とフレームのページもやらなくっちゃ☆
閉じてても、画像が重くて表示が遅いとかもぉ。。。(。´Д⊂)グス







詳解HTML & CSS & JavaScript辞典
秀和システム
大藤 幹


Amazonアソシエイト by ウェブリブログ


ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 2

ナイス
ガッツ(がんばれ!)

この記事へのコメント

この記事へのトラックバック