OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

フォームでテーブルの制御ってできる?

  • すぐに回答を!
  • 質問No.156537
  • 閲覧数61
  • ありがとう数5
  • 気になる数0
  • 回答数5
  • コメント数0

お礼率 53% (14/26)

例えば以下のようなテーブルがあるとします。

<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
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

質問者が選んだベストアンサー

  • 回答No.4
レベル10

ベストアンサー率 50% (72/143)

こんばんは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>

がんばってくださいね。
お礼コメント
jun9031

お礼率 53% (14/26)

ほんとうにありがとうございます!
ここまでしていただけるとは思いませんでした。
ほとんどそのまま利用できそうです。
ほんと感謝しています!
投稿日時 - 2001-10-26 17:28:02
-PR-
-PR-

その他の回答 (全4件)

  • 回答No.1

JavaScriptから document.フォーム名.オブジェクト名.value で値が得られます <HTML> <HEAD> <Script> <!-- function test_function() { var W; W = window.open(); W.document.open(); W.document. ...続きを読む
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>
お礼コメント
jun9031

お礼率 53% (14/26)

ありがとうございます。
これを利用すればなんとかできそうですが、
ちょっと知識が足りなさすぎで・・・(泣)
投稿日時 - 2001-10-25 15:46:50
  • 回答No.2
レベル10

ベストアンサー率 50% (72/143)

こんにちはjun9031さん、xruzです。 真中の列のrowspanを入れる事でテーブルを制御するサンプルを載せておきます。 (フレーム対応になってしまいました) Ie5.5sp2、NN6.1で動作確認済み、NN4.75動作不可(NN6.1ちょっと不安?) [ファイル名:tblf00] <Html> <Head> <Title>tblf00</ ...続きを読む
こんにちは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>

テーブル制御部分だけです。
>テキストエリアで書き込めるようにしたいのですが
ソースが長くなりますのでカットしましたが可能ですよ。

がんばってくださいね。
お礼コメント
jun9031

お礼率 53% (14/26)

ありがとうございます!
つたない説明でよくやりたかったことがわかってもらえました(笑)
けど、これでテーブルは右フレームに得られるんですが、
そのあとそれを加工しようとすると難しくおもうんですが・・・。ソースを得ることはできるんですか?
投稿日時 - 2001-10-25 15:40:52
  • 回答No.3
レベル7

ベストアンサー率 41% (10/24)

どうも、こんばんは。 JavaScriptを使えば可能だと思います。 ソースを全部書き換えちゃいますが、、 こんなのは、どうでしょう。 試してみてください。 数値の書き換えも可能だと思いますが、 スミマセン。やってみてソースを見て感じを掴んでください。 失礼しました。 ソースの例: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4 ...続きを読む
どうも、こんばんは。
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>
補足コメント
jun9031

お礼率 53% (14/26)

HTMLのソース部分が
一列になってしまうんですけど、
適当に分割させることは無理ですか?
テーブル作成後、
テキスト部分を加工したいので
それが一列になってくれると非常に助かります。
よろしくお願いします。
投稿日時 - 2001-10-25 16:15:07
お礼コメント
jun9031

お礼率 53% (14/26)

ありがとうございます!
これだと入力したあとHTML形式になるので
加工が楽ですね。
テーブルを作り、
テキストを書いた後に
同じようにテーブルを付け加えることってできるんですか?
いろいろ細かい質問ですいません。
投稿日時 - 2001-10-25 15:45:25
  • 回答No.5
レベル7

ベストアンサー率 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>
お礼コメント
jun9031

お礼率 53% (14/26)

ありがとうございます。
とても助かります!
すごく使いやすいもので感動です。
同じようにテーブルをつくるのでもいろんな方法が
あるんですね。
本格的に勉強しようかなと思います。
今後も機会があればまたよろしくお願いします。
投稿日時 - 2001-10-29 11:03:32
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ