- ベストアンサー
フォームでテーブルの制御ってできる？
例えば以下のようなテーブルがあるとします。 <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でできる方法があれば教えてください。 また、テーブル部分の数値になっているところも テキストエリアで書き込めるようにしたいのですが、可能ですか？
- みんなの回答 （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>
お礼
ありがとうございます。 これを利用すればなんとかできそうですが、 ちょっと知識が足りなさすぎで・・・（泣）
お礼
ほんとうにありがとうございます！ ここまでしていただけるとは思いませんでした。 ほとんどそのまま利用できそうです。 ほんと感謝しています！