重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

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

解決済

  • 質問者：jun9031
  • 質問日時：
  • 回答数：5件

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

<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でできる方法があれば教えてください。
また、テーブル部分の数値になっているところも
テキストエリアで書き込めるようにしたいのですが、可能ですか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.4ベストアンサー

  • 回答者： xruz
  • 回答日時：

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

がんばってくださいね。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ほんとうにありがとうございます！
ここまでしていただけるとは思いませんでした。
ほとんどそのまま利用できそうです。
ほんと感謝しています！

通報する
お礼日時：2001/10/26 17:28

No.5

  • 回答者： shiba1
  • 回答日時：

こんにちは、どうですか？


もう解決しましたか？確認するのを忘れていました。

そうですね。改行まで気がまわりませんでした。
少し改良しました。多少使い易くなったかな？

＞同じようにテーブルを付け加えることってできるんですか？

というのは、横の列を増やす。という意味ですか？
それともテーブルを並べる。という意味ですか？
別のテーブルを作ると言うことですか？

コピーして貼り付け、ではダメですか？

もう少し、「こういうのを作りたい」
という詳しい要望があれば作れるかも・・・。

↓少し改良しました。もう解決しちゃったかもですが。。

<!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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
とても助かります！
すごく使いやすいもので感動です。
同じようにテーブルをつくるのでもいろんな方法が
あるんですね。
本格的に勉強しようかなと思います。
今後も機会があればまたよろしくお願いします。

通報する
お礼日時：2001/10/29 11:03

No.3

  • 回答者： shiba1
  • 回答日時：

どうも、こんばんは。


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のソース部分が
一列になってしまうんですけど、
適当に分割させることは無理ですか？
テーブル作成後、
テキスト部分を加工したいので
それが一列になってくれると非常に助かります。
よろしくお願いします。

補足日時：2001/10/25 16:15
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！
これだと入力したあとHTML形式になるので
加工が楽ですね。
テーブルを作り、
テキストを書いた後に
同じようにテーブルを付け加えることってできるんですか？
いろいろ細かい質問ですいません。

通報する
お礼日時：2001/10/25 15:45

No.2

  • 回答者： xruz
  • 回答日時：

こんにちは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>

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

がんばってくださいね。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！
つたない説明でよくやりたかったことがわかってもらえました（笑）
けど、これでテーブルは右フレームに得られるんですが、
そのあとそれを加工しようとすると難しくおもうんですが・・・。ソースを得ることはできるんですか？

通報する
お礼日時：2001/10/25 15:40

No.1

  • 回答者： moyuru
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
これを利用すればなんとかできそうですが、
ちょっと知識が足りなさすぎで・・・（泣）

通報する
お礼日時：2001/10/25 15:46

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報