- 締切済み
tableタグについて
縦に2つセルがあって、左側のセルに文章がいっぱいに なったら、右側のセルに文章の続きを表示させたいのですが、自動的にそうさせる方法はあるでしょうか。 文章の途中で自分で決めたところからそうするのではなく、そのセルの大きさに合わせて、文章が自動的に右側のセルに移動するようにしたいのですが。 ご教授よろしくおねがいします。
- みんなの回答 （9）
- 専門家の回答
みんなの回答
- koutarou504
- ベストアンサー率44% (182/407)
ほぼ、#8さんの言われる事で充分かと・・・。 で、それらをまとめてみました。 <HTML> <HEAD> <TITLE></TITLE> <script type="text/javascript"> <!-- function fromTo(){ var f=""; var t=""; var str=""; var str2=""; var idx=0; var len=740; var len2=0; if(document.getElementById){ f=document.getElementById("FROM"); t=document.getElementById("TO"); }else if(document.all){ f=document.all("FROM"); t=document.all("TO"); }else if(document.layers){ f=document.layers("FROM"); t=document.layers("TO"); }; if(f){ if(f.innerHTML){ str=f.innerHTML; if(str.length < len) len=str.length; if(len < 1){}else{ if(len < len2) len2=len; if(len2 < 1){ if(str.length < len){}else{ f.innerHTML=str.substring(0,len); t.innerHTML=str.substring(len,str.length); }; }else{ str2="<NOBR>"; for(idx=0;idx+len2<len;idx=idx+len2){ str2=str2+str.substring(idx,idx+len2)+"<BR>"; }; str2=str2+str.substring(idx,len)+"<"+"/NOBR>"; f.innerHTML=str2; if(str.length < len){}else{ str2="<NOBR>"; for(idx=len;idx+len2<str.length;idx=idx+len2){ str2=str2+str.substring(idx,idx+len2)+"<BR>"; }; str2=str2+str.substring(idx,str.length)+"<"+"/NOBR>"; t.innerHTML=str2; }; }; }; }else if(f.firstChild){ if(f.firstChild.nodeValue){ str=f.firstChild.nodeValue; if(str.length < len){}else{ f.firstChild.nodeValue=str.substring(0,len); t.firstChild.nodeValue=str.substring(len,str.length); }; }; }; }; } //--> </script> </HEAD> <body onload="fromTo()"> <table border="0" width="900" CELLPADDING="10"> <tr> <td ID="FROM" width="450"> 文章・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・ </td> <td ID="TO" width="450" VALIGN="top"> </td> </tr> </table> </body> </HTML> 例示では、７４０文字ありませんので・・・。 文字数の調整は、変数 len の値を変えて対応して下さい。 尚、このままでは「・・・・・」の改行制御が ブラウザによって異なる様なので、 変数 len2 を変える事によって対応できます。 変数 len2 が 0 (1未満) だと、 その機能は処理しない様にしてあります。 ただ、innerHTML が無効なブラウザだと 対応できません・・・。 それから、文字数で強制的に改行しているだけなので 本来ブラウザが内容にて判断している様な きれいな改行ではありませんので、 ご注意下さい。 とりあえず、ＩＥ６，ネスケ７，オペラ７ ＯＳ：Ｗｉｎ にて確認しました。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
>表示が一列にずらーとなっています。 こちらでもやはり、一列になってしまいました。 どうも・・・・の部分が１つの単語として扱われる（途中で折り返さない）となるようです。 だから、実際の文章なら問題ないはずです。 あと、文字数が７４０に達しないようなら、数字を変えて下さい。 あと、 ＃７での変更点で var str = f.innerHTML; を var str = f.childNodes[0].nodeValue; にすると書くのが抜けていました。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
>うまくいかず #6さんの言う通りなのかもしれません。 ただ、getElementByIdはネスケ６以降で使えると思います。 innerHTMLが原因で動かない場合。 f.innerHTML=str.substring(0,740); t.innerHTML=str.substring(740,str.length); の部分を f.childNodes[0].nodeValue=str.substring(0,740); t.childNodes[0].nodeValue=str.substring(740,str.length); にしてみて下さい
- koutarou504
- ベストアンサー率44% (182/407)
＃５礼 もし提示のソースそのままだとしたら、 TABLE, TR の開始，終了タグがありませんが・・・。 で、例示の為に省いただけでしたら、 当方では各タグを記述して適切に動作しましたので、 ブラウザの問題かも・・・。 innerHTML は、ＩＥ４以降のみの機能の様で ネスケ等では機能しません・・・。 document.getElementById は、ＩＥ６以降なので、 document.all がＩＥ４以降なのでお勧めします。 document.write ならばＩＥ３，ネスケ２以降なので、 ＨＴＭＬタグごとその場でスクリプトで記述の方が良いのですがねぇ～・・・。
お礼
回答ありがとうございます。 TABLE、TRを省いて載せていました。また、IE6.0です。 <HTML> <HEAD> <TITLE></TITLE> <script type="text/javascript"> <!-- function fromTo(){ var f = document.getElementById("FROM"); var t = document.getElementById("TO"); var str = f.innerHTML; if(str.length >= 740){ f.innerHTML=str.substring(0,740); t.innerHTML=str.substring(740,str.length); } } //--> </script> </HEAD> <body onload="fromTo()"> <table border="0" width="900" CELLPADDING="10"> <tr> <td ID="FROM" width="450"> 文章・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・ <td ID="TO" width="450" VALIGN="top"> </tr> </table> </body> </HTML> 全部載せさせていただきました。何度もすみません。 表示が一列にずらーとなっています。どうしたらいいでしょうか。
補足
すみません、一部書き間違えました。 <table border="0" width="900" CELLPADDING="10"> <tr> <td ID="FROM" width="450"> 文章・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・ </td> <td ID="TO" width="450" VALIGN="top"> </td> </tr> </table> です
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
>HTMLで表示される文章はどこに書かれるのでしょうか。 <script …>～</script>の部分は、 <TITLE></TITLE> この辺に貼り付けて下さい。 </HEAD> <body onload="fromTo()"> は、 <BODY> を <BODY onload="fromTo()"> にするということです。 <td ID="FROM" width="450"> <td ID="TO" width="450" VALIGN="top"> は同じく元の＃２でいうところの 右と左のセルに ID="FROM" ID="TO" を追加して名前（ID）を付けるということです。 実際に長い文章を書くのは、 左側のセルの中です。
お礼
どうもありがとうございます。 何度もすみませんが、どうしてもうまくいかず確認できません。 見ていただけますでしょうか？ <HTML> <HEAD> <TITLE></TITLE> <script type="text/javascript"> <!-- function fromTo(){ var f = document.getElementById("FROM"); var t = document.getElementById("TO"); var str = f.innerHTML; if(str.length >= 740){ f.innerHTML=str.substring(0,740); t.innerHTML=str.substring(740,str.length); } } //--> </script> </HEAD> <body onload="fromTo()"> <td ID="FROM" width="450"> 文章・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・ <td ID="TO" width="450" VALIGN="top"> </body> </HTML> と書きました。 ご指摘いただけますようお願いします。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
とりあえず７４０文字で隣のセルに移すスクリプトを書いてみました。 <script type="text/javascript"> <!-- function fromTo(){ var f = document.getElementById("FROM"); var t = document.getElementById("TO"); var str = f.innerHTML; if(str.length >= 740){ f.innerHTML=str.substring(0,740); t.innerHTML=str.substring(740,str.length); } } //--> </script> <body onload="fromTo()"> <td ID="FROM" width="450"> <td ID="TO" width="450" VALIGN="top"> IDで名前を振ったFROMからTOへ７４０文字をはみ出す文字列を書き出します。 改行文字とかもカウントしますので注意が必要。
お礼
回答ありがとうございます。 スクリプトまで作っていただき、感謝致します。 javascriptは初めてなもので、教えていただきたいのですが、これをHTMLに組み込むのですよね。 たとえば、HTMLで表示される文章はどこに書かれるのでしょうか。 <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <script type="text/javascript"> <!-- function fromTo(){ var f = document.getElementById("FROM"); var t = document.getElementById("TO"); var str = f.innerHTML; if(str.length >= 740){ f.innerHTML=str.substring(0,740); t.innerHTML=str.substring(740,str.length); } } //--> </script> <body onload="fromTo()"> <td ID="FROM" width="450"> <td ID="TO" width="450" VALIGN="top"> </BODY> </HTML> このような感じでいいのですか？実際の740文字はどこにかくことになるのでしょうか。よろしくお願いします。
- koutarou504
- ベストアンサー率44% (182/407)
＃２ 「２つセルがあって、左側のセルに 文章がいっぱい（740文字くらい）になったら、 右側のセルに文章の続き（740文字以内）を 表示させたいのですが、 自動的にそうさせる方法はあるでしょうか。」 質問内容を改めて編集すると上記の様になりますが、 これだと単に文字数を数えれば良いだけですが いかがでしょうか？ 提示のタグの記述では、 セルの横幅は指定されていますが、 高さの指定はないので、 改行が無限であり「セルに文章がいっぱい」の判断が 後の指摘の「740文字くらい」しかありません。 それから文字サイズの考慮はいかがされているでしょうか。 ＞＞＞セルのサイズが固定で、かつ単位が何文字分とかだと、 対応が可能かも・・・。 これは、文字サイズを気にせずに 文字数で「セルに文章がいっぱい」の判断が出来るという事です。 <TD STYLE="width:20em;"> この指定だと、横幅２０文字分という意味です。 とにかく、処理に「セルに文章がいっぱい」という 判断をどうさせるかなので、 直接「いっぱい」と判断する事は不可能なので 文字数を間にするしか・・・。 で、改めて気になったのですが、 どの様に動的に文章を表示するのでしょうか？ スクリプトの途中とかはじめとかが？？？でしが。
お礼
回答どうもありがとうございます。 文字サイズは考慮していませんでした。考慮せずにできたらと思っています。文字数で判断できるのですね。<TD STYLE="width:20em;">例えばこのように横に20文字を37行続けて、その続きはまた上に上がって最初の行のとなりから始めるにはどうかいたらいいのでしょう。<TD STYLE="height:37em;">としても、続きは右上にいくようにしたらいいのでしょうか。 ーーーーーー ーーーーーー ーーーーーー －－－－－－ ーーーーーー －－－－－－ ーーーーーー －－－－－－ ーーーーーー －－－－－－ ーーーーーー －－－－－－ このように表示させたいのですが。 よろしくお願いします。 >どの様に動的に文章を表示するのでしょうか？ スクリプトの途中とかはじめとかが？？？でしが。 Perlで既存のtxtファイルを読み込んでHTMLで出力 させようと思っています。ですので、Perlで記述するときに、変換前のファイルの文章のどの変で右上にいかせるかを書きたいと思っています。
- koutarou504
- ベストアンサー率44% (182/407)
質問に対して質問で申し訳ございませんが・・・。 「あの～。左のセルがいっぱいになったら右。 ならば、右のセルもいっぱいになったら？？？」 「あの～。何を以っていっぱいと判断されるのですか。 文章は勝手に改行されて、 セルの大きさは変わると思いますが・・・。」 セルのサイズが固定で、かつ単位が何文字分とかだと、 対応が可能かも・・・。
お礼
わかりづらい質問内容、申し訳ありませんでした。 だいたいの文章の量がわかっていて、それをブラウザに縦に線があるみたいにして、その両側に文章を分けて表示させたいのです。それでだいたいの文章の量というのが、左側で740文字くらいでそれを超えたら右側に移って続くというような感じです。量的には右側も740文字以内に収まります。 ^^^^^^^^^^^^^^^^^ ： ： <table border="0" width="900" CELLPADDING="10"> <tr> <td width="450"> 文章（左側に当たる部分） </td> <td width="450" VALIGN="top"> ・・・・・＊ 文章（右側に当たる部分） </td> </tr> </table> ： ： ^^^^^^^^^^^^^^^^^＾ このように実際のスクリプトの途中＊で記述しないで文字数が大体740付近までいったら、右側に続きがいくようにしたいです。途中でなく、はじめに記述することで文字数の制限などの条件から、このようにすることはできますでしょうか。 ＞セルのサイズが固定で、かつ単位が何文字分とかだと、 対応が可能かも・・・。 具体的にどのように書けばいいのでしょうか。 ご質問の答えになっているでしょうか…。 どうぞよろしくお願いします。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
一般に、ＨＴＭＬでは、「文章」の大きさを想定していません。 逆に言うと、いくらでも横に長くなったり縦に長くなったりします。また、ブラウザのサイズによってセルのサイズも通常変わります。 だから、これぐらいの大きさになったら、というところと、これぐらいの文字列があるというところを 適当に判断して、スクリプトなどでやるしかありませんが 現在どれくらいの大きさ（文字やセル）で「表示」がされているかうまく取り出す方法がないような気がします。 逆に、そういう「大きさ」を自分であらかじめ決めてやるならそれなりに、どの程度の文字数で一杯になるのか判断できるかもしれません。
お礼
早速、アドバイスをいただきまして、どうもありがとうございます。 HTMLで大きさを調整するのはできないのですね。 うーん・・・困りました。今ブラウザ上に、どうしても上記のように自動的にある程度まで文字数が左側に書かれたら右側に移るようにしたいのですが、何かいい方法はないでしょうか。 何かアドバイスいただけると、うれしいです。 よろしくお願いします。
お礼
何度もありがとうございます。 下にもう一度全部載せてみました。 同じこと何回も申し訳ありませんが、 見てくださいませんでしょうか。 お願いいたします。