アレについてはいろいろアレンジできますが、今回は

「ボタンをクリックしたらボタンに応じたオブジェクトにスクリプトが実行されるJavaScriptの備忘録の前半」

です。

時間がないので、調べている過程で知ったことや、関連事項のまとめなどは後日書きます。

とりあえず、、、

nを正の整数とするとき、

1. 初期状態は、テーブル１と、「テーブル２を追加する」ボタンを表示
2. テーブルｎが表示されたら、「テーブル（ｎ＋１）を追加する」ボタンも表示。ただし、ｎ＋１＝６のときはアラート表示
3. テーブルｎが表示されているときは、「テーブルｎを追加する」ボタンは非表示にする
4. テーブル内に設置された「削除」ボタンで、そのテーブルを削除する（非表示にさせる）
5. テーブルｎが削除されたら「テーブルｎを追加」ボタンを表示させる
6. テーブルｎが削除されているときは「テーブル（ｎ＋１）を追加」ボタンは非表示とさせる
7. ｎの最大値は５

というページを作る用事があったので、こんな感じで作ってみました。

CSS↓

#add1,
#add3,
#add4,
#add5,
#noMoreTable,
#table2,
#table3,
#table4,
#table5 {
	display:none;
}

JavaScript↓

function add1() {
	document.getElementById('table1').style.display=['block'];
	document.getElementById('add1').style.display=['none'];
	if(document.getElementById('table2').style.display !='block')
		{document.getElementById('add2').style.display=['block'];}
}

function add2() {
	document.getElementById('table2').style.display=['block'];
	document.getElementById('add2').style.display=['none'];
	if(document.getElementById('table3').style.display !='block')
		{document.getElementById('add3').style.display=['block'];}
}

function add3() {
	document.getElementById('table3').style.display=['block'];
	document.getElementById('add3').style.display=['none'];
	if(document.getElementById('table4').style.display !='block')
		{document.getElementById('add4').style.display=['block'];}
}

function add4() {
	document.getElementById('table4').style.display=['block'];
	document.getElementById('add4').style.display=['none'];
	if(document.getElementById('table5').style.display !='block')
		{document.getElementById('add5').style.display=['block'];}
}

function add5() {
	document.getElementById('table5').style.display=['block'];
	document.getElementById('add5').style.display=['none'];
	document.getElementById('noMoreTable').style.display=['block'];
}

function del1() {
	document.getElementById('add1').style.display=['block'];
	document.getElementById('table1').style.display=['none'];
	document.getElementById('add2').style.display=['none'];
}

function del2() {
	document.getElementById('add2').style.display=['block'];
	document.getElementById('table2').style.display=['none'];
	document.getElementById('add3').style.display=['none'];
}

function del3() {
	document.getElementById('add3').style.display=['block'];
	document.getElementById('table3').style.display=['none'];
	document.getElementById('add4').style.display=['none'];
}

function del4() {
	document.getElementById('add4').style.display=['block'];
	document.getElementById('table4').style.display=['none'];
	document.getElementById('add5').style.display=['none'];
}

function del5() {
	document.getElementById('add5').style.display=['block'];
	document.getElementById('table5').style.display=['none'];
	document.getElementById('noMoreTable').style.display=['none'];
}

function noMoreTable() {
	window.alert('申し訳ございません。テーブルは最大５つまでです。')
}

html↓

<p><input type="button" id="add1" value="テーブル１を追加" onclick="add1();"></p>

<table border="1" id="table1">
	<tr>
		<td>テーブル１</td>
		<td><input type="button" value="削除" onclick="del1();"></td>
	</tr>
</table>

<p><input type="button" id="add2" value="テーブル２を追加" onclick="add2();"></p>

<table border="1" id="table2">
	<tr>
		<td>テーブル２</td>
		<td><input type="button" value="削除" onclick="del2();"></td>
	</tr>
</table>

<p><input type="button" id="add3" value="テーブル３を追加" onclick="add3();"></p>

<table border="1" id="table3">
	<tr>
		<td>テーブル３</td>
		<td><input type="button" value="削除" onclick="del3();"></td>
	</tr>
</table>

<p><input type="button" id="add4" value="テーブル４を追加" onclick="add4();"></p>

<table border="1" id="table4">
	<tr>
		<td>テーブル４</td>
		<td><input type="button" value="削除" onclick="del4();"></td>
	</tr>
</table>

<p><input type="button" id="add5" value="テーブル５を追加" onclick="add5();"></p>

<table border="1" id="table5">
	<tr>
		<td>テーブル５</td>
		<td><input type="button" value="削除" onclick="del5();"></td>
	</tr>
</table>

結果↓

一応できたんですが、ブログで書くとWordPressや自分でカスタマイズした機能が働いて、今ひとつ思い通りになっていません。余裕ができたらそこら辺を修正をしたいと思います。

あ、あと今後の課題として、テーブルやボタンのidは添え字1～5の配列にする、とか、最大値を任意のnにしてそのnの値はユーザー側で設定できるようにする、など。