- ベストアンサー
フォームでテーブルの制御ってできる？
例えば以下のようなテーブルがあるとします。 <html> <head> </head> <body> <table border> <tr><td rowspan="6">1</td> <td rowspan="3">2</td> <td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td rowspan="2">6</td> <td>7</td></tr> <tr><td>8</td></tr> <tr><td>9</td><td>10</td></tr> </body> </html> フォームでこのrowspanの数値をいれるだけで このようなテーブルをつくるような手段はありますか？ JavaScriptかHTMLでできる方法があれば教えてください。 また、テーブル部分の数値になっているところも テキストエリアで書き込めるようにしたいのですが、可能ですか？
- jun9031
- お礼率53% (14/26)
- HTML
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
こんばんはjun9031さん、xruzです。 ソースがいりますか。。。。少し改造しました。 右フレームの「Table Create」をクリックすると別Windowが開きますので、そのソースを表示してくださいね。 なお、開いたWindowを閉じないでテーブルを再設定し「Table Create」をクリックすると前のテーブルに追加して表示されます。 （Ie5.5sp2のみ動作確認済み。NN6.1では無理でした。。。。） [ファイル名：tblf00.html] <Html> <Head> <Title>tblf00</Title> </Head> <Script Language="JavaScript"> <!-- var ar=new Array(0,1,1,1); function rowChange(r,rs) { ar[r]=rs.options[rs.selectedIndex].value; parent.side.location.reload(); parent.main.location.reload(); } function td3Write(f,r,t) { with(f) for(var i=0;i<r-1;i++) document.writeln("<tr><td>3-",t,"-",(i+1),"</td></tr>"); } function td2Write(f,i) { var s=""; if(f==parent.side) s="<select name='col2"+i+"' size='1' onChange='parent.rowChange("+i+",this)'></select>"; with(f) { if(i!=1) document.write("<tr>"); document.writeln("<td rowspan='",ar[i],"'>2-",i,s,"</td><td>3-",i,"-","0</td></tr>");} td3Write(f,ar[i],i); } function td1Write(f,k) { for(var i=1;i<ar.length;i++) k=k+ar[i]; with(f) document.writeln("<td rowspan='",k,"'>1-1</td>"); for(var i=1;i<ar.length;i++) td2Write(f,i); } function setSelOption() { for(var j=1;j<ar.length;j++) with(eval("parent.side.document.frm.col2"+j)) for(var i=0;i<(length=5);i++) {options[i].text=options[i].value=i+1; if(options[i].value==ar[j]) options[i].selected=true;} } //--> </Script> <Frameset Cols="30%,*" FrameBorder="1"> <Frame Src="tblf01.html" Name="side"> <Frame Src="tblf02.html" Name="main"> </Frameset> </Html> [ファイル名：tblf01.html] <Html> <Head> <Title></Title> </Head> <body> Side <form method="post" name="frm"> <table border="1" align="center" width="90%"> <tr> <Script Language="JavaScript"> <!-- parent.td1Write(this,0); parent.setSelOption(); //--> </Script> </table> </form> </body> </html> [ファイル名：tblf02.html] <Html> <Head> <Title></Title> </Head> <Script Language="JavaScript"> <!-- function tCre() { wid=window.open("","tblCre",""); wid.document.writeln("<table border='1' align='center' width='90%'>\n<tr>"); parent.td1Write(wid,0); wid.document.writeln("</table>"); wid.focus(); } //--> </Script> <Body> Main <table border="1" align="center" width="90%"> <tr> <Script Language="JavaScript"> <!-- parent.td1Write(this,0); //--> </Script> </table> <Form Method="post" Name="frm"> <Input Type="button" Value="Table Create" onClick="tCre();"> </Form> </body> </html> がんばってくださいね。
その他の回答 (4)
- shiba1
- ベストアンサー率41% (10/24)
こんにちは、どうですか？ もう解決しましたか？確認するのを忘れていました。 そうですね。改行まで気がまわりませんでした。 少し改良しました。多少使い易くなったかな？ ＞同じようにテーブルを付け加えることってできるんですか？ というのは、横の列を増やす。という意味ですか？ それともテーブルを並べる。という意味ですか？ 別のテーブルを作ると言うことですか？ コピーして貼り付け、ではダメですか？ もう少し、「こういうのを作りたい」 という詳しい要望があれば作れるかも・・・。 ↓少し改良しました。もう解決しちゃったかもですが。。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv=Content-Type content="text/html; charset=shift_jis"> <META http-equiv=Content-Script-Type content=text/javascript> <script language="JavaScript"> <!-- function mytbl () { tcnt1 = parseInt(document.tmaker.m1.value) ; tcnt2 = parseInt(document.tmaker.m2.value) ; tcnt3 = parseInt(document.tmaker.m3.value) ; tcnt4 = parseInt(document.tmaker.m4.value) ; if(tcnt1==tcnt2+tcnt3+tcnt4){ twdw = window.open(); twdw.document.write('<html>\n<head>\n<title>新しいテーブル</title>\n</head>\n<body>\n<div align="center">\n<form>\n<input type="button" name="btn" value="押すと閉じます" OnClick="JavaScript:window.close()">\n</form>\n\n<!--ココから下をコピーして使ってください-->\n\n<table border="1" width="70%">\n<tr>\n<td rowspan="'+ tcnt1 +'" bgcolor="#6666ff">1</td>\n<td rowspan="'+ tcnt2 +'" bgcolor="#ff6666">2</td>\n<td>3</td>\n</tr>\n'); for(rcnt=1;rcnt<tcnt2;rcnt++) {twdw.document.write('<tr>\n<td>'+(rcnt+3)+'</td>\n</tr>\n');} twdw.document.write('<tr>\n<td rowspan="'+ tcnt3 +'" bgcolor="#ffff66">'+(rcnt+3)+'</td>\n<td>'+(rcnt+4)+'</td>\n</tr>\n'); for(scnt=1;scnt<tcnt3;scnt++) {twdw.document.write('<tr>\n<td>'+(rcnt+scnt+4)+'</td>\n</tr>\n');} twdw.document.write('<tr>\n<td rowspan="'+ tcnt4 +'" bgcolor="#66ff66">'+(rcnt+scnt+4)+'</td>\n<td>'+(rcnt+scnt+5)+'</td>\n</tr>\n'); for(qcnt=1;qcnt<tcnt4;qcnt++) {twdw.document.write('<tr>\n<td>'+(rcnt+scnt+qcnt+5)+'</td>\n</tr>\n');} twdw.document.write('</table>\n\n<!--テーブルのソースはココまで-->\n\n</div>\n</body>\n</html>');} else{alert('全体の行と\nそれぞれの行の合計を\n合わせて下さい。');} } //--> </script> </head> <body> <div align="center"> <table border="1" width="70%"> <tr><td rowspan="6" bgcolor="#6666ff">1</td> <td rowspan="3" bgcolor="#ff6666">2</td> <td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td rowspan="2" bgcolor="#ffff66">6</td> <td>7</td></tr> <tr><td>8</td></tr> <tr><td bgcolor="#66ff66">9</td><td>10</td></tr> </table> <form name="tmaker"> 全体<font color="#6666ff">■</font>の行：<input type="text" value="6" size="4" name="m1"> <font color="#ff6666">■</font>の行：<input type="text" value="3" size="4" name="m2"> <font color="#ffff66">■</font>の行：<input type="text" value="2" size="4" name="m3"> <font color="#66ff66">■</font>の行：<input type="text" value="1" size="4" name="m4"> <input type="button" value="Click!" onClick="mytbl()"> </form> <font color="#6666ff">■</font>＝<font color="#ff6666">■</font>＋<font color="#ffff66">■</font>＋<font color="#66ff66">■</font>になるようにして下さい。<BR> 新しいウィンドウが開きます。<BR> </div> <hr> </body> </html>
お礼
ありがとうございます。 とても助かります！ すごく使いやすいもので感動です。 同じようにテーブルをつくるのでもいろんな方法が あるんですね。 本格的に勉強しようかなと思います。 今後も機会があればまたよろしくお願いします。
- shiba1
- ベストアンサー率41% (10/24)
どうも、こんばんは。 JavaScriptを使えば可能だと思います。 ソースを全部書き換えちゃいますが、、 こんなのは、どうでしょう。 試してみてください。 数値の書き換えも可能だと思いますが、 スミマセン。やってみてソースを見て感じを掴んでください。 失礼しました。 ソースの例： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv=Content-Type content="text/html; charset=shift_jis"> <META http-equiv=Content-Script-Type content=text/javascript> <script language="JavaScript"> <!-- function mytbl () { tcnt1 = parseInt(document.tmaker.m1.value) ; tcnt2 = parseInt(document.tmaker.m2.value) ; tcnt3 = parseInt(document.tmaker.m3.value) ; tcnt4 = parseInt(document.tmaker.m4.value) ; if(tcnt1==tcnt2+tcnt3+tcnt4){ document.write('<table border="1"><tr><td rowspan="'+ tcnt1 +'" bgcolor="#6699ff">1</td><td rowspan="'+ tcnt2 +'" bgcolor="#99ccff">2</td><td>3</td></tr>'); for(rcnt=1;rcnt<tcnt2;rcnt++) {document.write('<tr><td>'+(rcnt+3)+'</td></tr>');} document.write('<tr><td rowspan="'+ tcnt3 +'" bgcolor="#ccffff">'+(rcnt+3)+'</td><td>'+(rcnt+4)+'</td></tr>'); for(scnt=1;scnt<tcnt3;scnt++) {document.write('<tr><td>'+(rcnt+scnt+4)+'</td></tr>');} document.write('<tr><td rowspan="'+ tcnt4 +'" bgcolor="#f0ffff">'+(rcnt+scnt+4)+'</td><td>'+(rcnt+scnt+5)+'</td></tr>'); for(qcnt=1;qcnt<tcnt4;qcnt++) {document.write('<tr><td>'+(rcnt+scnt+qcnt+5)+'</td></tr>');} document.write('</table>');} else{alert('全体の行と\nそれぞれの行の合計を\n合わせて下さい。');} } //--> </script> </head> <body> <table border="1"> <tr><td rowspan="6" bgcolor="#6699ff">1</td> <td rowspan="3" bgcolor="#99ccff">2</td> <td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td rowspan="2" bgcolor="#ccffff">6</td> <td>7</td></tr> <tr><td>8</td></tr> <tr><td bgcolor="#f0ffff">9</td><td>10</td></tr> </table> <form name="tmaker"> 全体<font color="#6699ff">■</font>の行：<input type="text" value="6" size="4" name="m1"> <font color="#99ccff">■</font>の行：<input type="text" value="3" size="4" name="m2"> <font color="#ccffff">■</font>の行：<input type="text" value="2" size="4" name="m3"> <font color="#f0ffff">■</font>の行：<input type="text" value="1" size="4" name="m4"> <input type="button" value="Click!" onClick="mytbl()"> </form> <hr> </body> </html>
お礼
ありがとうございます！ これだと入力したあとHTML形式になるので 加工が楽ですね。 テーブルを作り、 テキストを書いた後に 同じようにテーブルを付け加えることってできるんですか？ いろいろ細かい質問ですいません。
補足
HTMLのソース部分が 一列になってしまうんですけど、 適当に分割させることは無理ですか？ テーブル作成後、 テキスト部分を加工したいので それが一列になってくれると非常に助かります。 よろしくお願いします。
- xruz
- ベストアンサー率50% (72/143)
こんにちはjun9031さん、xruzです。 真中の列のrowspanを入れる事でテーブルを制御するサンプルを載せておきます。 （フレーム対応になってしまいました） Ie5.5sp2、NN6.1で動作確認済み、NN4.75動作不可（NN6.1ちょっと不安？） [ファイル名：tblf00] <Html> <Head> <Title>tblf00</Title> </Head> <Script Language="JavaScript"> <!-- var ar=new Array(0,1,1,1); function rowChange(r,rs) { ar[r]=rs.options[rs.selectedIndex].value; parent.side.location.reload(); parent.main.location.reload(); } function td3Write(f,r,t) { with(f) for(var i=0;i<r-1;i++) document.write("<tr><td>3-",t,"-",(i+1),"</td></tr>"); } function td2Write(f,i) { var s=""; if(f==parent.side) s="<select name='col2"+i+"' size='1' onChange='parent.rowChange("+i+",this)'></select>"; with(f) { if(i!=1) document.write("<tr>"); document.write("<td rowspan='",ar[i],"'>2-",i,s,"</td><td>3-",i,"-","0</td></tr>");} td3Write(f,ar[i],i); } function td1Write(f,k) { for(var i=1;i<ar.length;i++) k=k+ar[i]; with(f) document.write("<td rowspan='",k,"'>1-1</td>"); for(var i=1;i<ar.length;i++) td2Write(f,i); } function setSelOption() { for(var j=1;j<ar.length;j++) with(eval("parent.side.document.frm.col2"+j)) for(var i=0;i<(length=5);i++) {options[i].text=options[i].value=i+1; if(options[i].value==ar[j]) options[i].selected=true;} } //--> </Script> <Frameset Cols="30%,*" FrameBorder="1"> <Frame Src="tblf01.html" Name="side"> <Frame Src="tblf02.html" Name="main"> </Frameset> </Html> [ファイル名：tblf01] <Html> <Head> <Title></Title> </Head> <body> Side <form method="post" name="frm"> <table border="1" align="center" width="90%"> <tr> <Script Language="JavaScript"> <!-- parent.td1Write(this,0); parent.setSelOption(); //--> </Script> </table> </form> </body> </html> [ファイル名：tblf02] <Html> <Head> <Title></Title> </Head> <Body> Main <form method="post" name="frm"> <table border="1" align="center" width="90%"> <tr> <Script Language="JavaScript"> <!-- parent.td1Write(this,0); //--> </Script> </table> </form> </Body> </Html> テーブル制御部分だけです。 >テキストエリアで書き込めるようにしたいのですが ソースが長くなりますのでカットしましたが可能ですよ。 がんばってくださいね。
お礼
ありがとうございます！ つたない説明でよくやりたかったことがわかってもらえました（笑） けど、これでテーブルは右フレームに得られるんですが、 そのあとそれを加工しようとすると難しくおもうんですが・・・。ソースを得ることはできるんですか？
JavaScriptから document.フォーム名.オブジェクト名.value で値が得られます <HTML> <HEAD> <Script> <!-- function test_function() { var W; W = window.open(); W.document.open(); W.document.write("<html> <body>"); W.document.write("<table border>"); W.document.write("<td>"+document.test_form.test_input.value+"</td>"); W.document.write("<td>"+document.test_form.test_select.value+"</td>"); W.document.write("</table>"); W.document.write("</body> </html>"); W.document.close(); } --> </Script> </HEAD> <BODY> <FORM name="test_form"> <input type="text" name="test_input" value="test1"> <SELECT name="test_select"> <OPTION value="select1">1 <OPTION value="select2">2 </SELECT> <input type="button" onClick="test_function()" value="text"> </FORM> </BODY> </HTML>
お礼
ありがとうございます。 これを利用すればなんとかできそうですが、 ちょっと知識が足りなさすぎで・・・（泣）
関連するQ&A
- 入れ子にしたテーブルをheight100%にする
お世話になります。 以下のソースで、table2の高さを100％にしたいです。 この書き方では、firefoxではうまく表示できるのですが、 IEではだめでした。どこがいけないのでしょうか？？ ---------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> <!-- html {height:100%;} body {height:100%;} .th100 {height:100%;} --> </style> </head> <body> <table width="600" border="1" cellpadding="0" cellspacing="0" class="th100"> <tr> <td width="300" rowspan="2"> 長いテキスト </td> <td height="50"><table width="300" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000"> <tr> <td>table1</td> </tr> </table></td> </tr> <tr> <td><table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" class="th100"> <tr> <td>table2</td> </tr> </table></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- テーブル内での改行がうまくいかない
ウィンドウが小さくなると、それに合わせてテーブルも小さくなると思っていたのですが、下のソースを表示すると、テーブルが一定の大きさから小さくなりません。何が悪いのでしょうか。 --ソース-- <HTML> <HEAD></HEAD> <BODY > <TABLE border="1"> <TR> <TD>sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</TD> </TR> </TABLE> </BODY> </HTML> よろしくお願いします。
- ベストアンサー
- HTML
- CSSのtableについて【CSSが無かったのでHTMLで…。】
<html> <head> <title>test</title> <style type="text/css"> <!-- table { border : 1px #000000 solid; text-align : center; } td,th { border : 1px #000000 solid; width : 100px; } --> </style> </head> <body> <table> <tr> <td rowspan="2"> 1 </td> <td> 3 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td colspan="2"> 3 </td> </tr> </table> </body> </html> このように入力をした場合、一番下にできるテーブル(3)2つ結合しているにもかかわらず、1つ分？の状態で文字がcenterになってしまいます。結合した(2つの)真ん中に表示させるにはどうしたらいいですか？？ 教えてください☆
- ベストアンサー
- HTML
- テーブルの線の幅を一重の線にしたい
<HTML DIR=LTR> <HEAD> </HEAD> <BODY> <TABLE border=1 bordercolor="#808080"> <TR> <TH>タイトル</TH> </TR> <TD>aaa</TD> </TR> <TR> <TD>bbb</TD> </TR> <TR> <TD>ccc</TD> </TR></TABLE> </BODY> </HTML> これにすると画像のように線の幅が二重線になってしまうのですが、 一重にするにはどうすればいいですか？ <TABLE border=1 を<TABLE border=0にすると、線が消えてしまいます。
- ベストアンサー
- HTML
- tableがうまくいかないのですけど
どうしてなのでしょう 自分はmac os xなんですけど 文字化けしたり、セルがバラバラだったり、背景色も乗らないんですけど、 まだ初心者なんで教えて下さい。 <html> <head> <title>TheMY WorlD PloF AreA</title> </head> <body text="white" bgcolor="black"> <table border="2" border color="blue" cellpadding="10px"> <tr><td rowspan="2">NemE</td><td>TheMY</td></tr> <tr><td rowspan="2">From AreA</td><td>廣島</td></tr> <tr><td rowspan="2">HoW TO MY WaY</td><td>GO WitH FroW</td></tr> <tr><td rowspan="2">LikeS BooK</td><td>清水次郎長三国志、富島松伍郎伝</td></tr> <tr><td rowspan="2">LikeS MangA</td><td>COBRA,銀魂、ガキジャン、</td></tr> <tr><td rowspan="2">LikeS Musician</td><td>2Pac,EMINEM,SnooP Dogg,50cent<br>Lill Jon,Big Daddy Kane<br>Nas,Eazy E,<br>,,,So My love Hip Hop</td></tr> <tr><td rowspan="2">LikeS MuzaC</td><td>2Pac-Hit En' Up<br>Snoop dogg-Candy</td></tr> <tr><td rowspan="2">LikeS AnimE</td><td>disny</td></tr> </table> </body> </html>
- ベストアンサー
- HTML
- HTMLのテーブルについて
HTMLのテーブルについて 今、HTMLを勉強しています。下記のようにテーブルを作成し一部にセルの結合を行ったところ、(2)の結合したセル右端から外枠までが広がってしまいます。せっかく綺麗に見えるように上の表と下の表のセル幅を合わせても、上の表の右端が出っ張ってしまって意味がありません。 これを解決するにはどのように改善すればいいのでしょうか？ <html> <head> <title>A</title> </head> <body> <table border="2"> <tr> <th>No.</th> <th>名前</th> <th width="50">備考</th> </tr> <tr> <td>１</td> <td>Ａ君</td> <td>(1)</td> </tr> <tr> <td>１</td> <td>Ｂ君</td> <td rowspan="2">(2)</td> </tr> <tr> <td>１</td> <td>Ｃ君</td> <td></td> </tr> </table> <br> <table border="2"> <tr> <th>No.</th> <th>名前</th> <th width="50">備考</th> </tr> <tr> <td>２</td> <td>Ｄ君</td> <td>(3)</td> </tr> <tr> <td>２</td> <td>Ｅ君</td> <td>(4)</td> </tr> <tr> <td>２</td> <td>Ｆ君</td> <td>(5)</td> </tr> </table> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- テーブルを横に二つ並べて表示する方法はありますか？
テーブルを横に二つ並べて表示する方法はありますか？ 4列のテーブルを作るのではなく、 2列のテーブルを2個並べたいです。 <html> <head> <title>test</title> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>No</td><td>Destination</td></tr> <tr><td>a</td><td>b</td></tr> </table> <table border=1 cellspacing=1 cellpadding=1> <tr><td>No</td><td>Destination</td></tr> <tr><td>a</td><td>b</td></tr> </table> </body> </html> これだと、縦に２個並んでしまいます。
- 締切済み
- HTML
- テーブルをテーブルで囲う意味はありますか？
<table border=1> <tr><td> <table border=1> <tr><td> a </td><td> b </td></tr> </table> </td> </tr> </table> このようにテーブルをテーブルで囲う意味はありますか？ ｈｔｍｌの勉強をしていて、 ネット上でテーブルのサンプルを拾ったのですが、 上記のようにテーブルをテーブルで囲んでました。 この方法でサイト上に１００個くらいテーブルを作ってしまったのですが 今更ながらこういう書き方に意味はあるのかな？ と思い始めてきました。 意味はあるのでしょうか？
- ベストアンサー
- HTML
- TABLE内のTABLEのHEIGHT属性が利かない
TABLEの中にTABLEを入れ子にしてHTMLを作ったのですが、 外のTABLEのHEIGHTを変動にして、内のTABLEのHEIGHTを100%にしてもHEIGHTがくっつきません。 検証したところ、IE5.0(Mac)は利くようですが、IE5.5(Win)は100%が利きません。 そういう仕様なのでしょうか？しょうがないのでしょうか？ それともCSSで解決できるものでしょうか？ ご存じの方いらっしゃいましたらご教授ください。 参考に、ソースをご覧ください。 <HTML> <HEAD> <TITLE>SAMPLE</TITLE> </HEAD> <BODY> <TABLE WIDTH="600" HEIGHT="600"> <TR> <TD> <TABLE WIDTH="500" HEIGHT="100%"> <TR> <TD>SAMPLE</TD> </TR> </TABLE> </TD> </TR> </TABLE> </BODY> </HTML>
- ベストアンサー
- HTML
- FireFoxでborder-collapseを使うと余計な枠線が表示される
FireFoxでborder-collapse:collapseを指定すると、余分な枠線が表示されてしまいます。 IEでは問題ありません。 <HTML> <HEAD> <title>TEST</title> <style type="text/css"> table { border-collapse: collapse; } td { border: 1px solid black; } td.none{border:none;} </style> </HEAD> <BODY> <table> <tbody> <tr><td rowspan="2">test</td><td class=none> </td><td rowspan="2">text</td><td class=none> </td></tr> <tr><td class=none>text</td><td td class=none> </td></tr> <tr><td rowspan="2">test</td><td class=none> </td><td rowspan="2">text</td><td class=none> </td></tr> <tr><td class=none>text</td><td td class=none> </td></tr> <tr><td class=none> </td><td td class=none> </td><td class=none> </td><td class=none> </td></tr></tbody> </table> </BODY> </HTML> 何か対策は無いでしょうか？
- 締切済み
- その他([技術者向] コンピューター)
お礼
ほんとうにありがとうございます！ ここまでしていただけるとは思いませんでした。 ほとんどそのまま利用できそうです。 ほんと感謝しています！