【Javascript】動的なテーブルの追加
お客さんの業務から自分達の業務まで、テーブル構造で情報をまとめるということはよくあると思います。
グレープシティ社などからもエクセルライクをWebで実現するパッケージなどもでています。
参考ＵＲＬ：http://www.grapecity.com/tools/products/spread7
と言うことで、今回はテーブルを動的に追加することを行ってみます。
手順としては、以下です。
０、テキストボックスの値をテキストボックスIDから取得
１、テーブルのＩＤの取得
２、rowエレメントの追加
３、セルエレメントの追加
４、セルエレメントに「０」で取得した値の代入
といった感じ。
ＩＤの取得を行い、特定のエレメントのオブジェクトを取得できるのは大変便利。
たとえば、
・入力されたテキストボックスからの値の取得
・画面上に複数存在するボタンのどれが押下されたかの取得（同一functionでＯＫに なる）
など、特定オブジェクトのプロパティを変えたり、イベントを設定できる。
以下、ソース
※ここはこうした方がいいとかというアドバイス、是非ください。
周りにＪＳのできる人がいなくて、インプットが書籍とネット
だけなので、、、
<html>
<head></head>
<body>
<h2>テーブルを追加していく部品</h2>
<input type="text" id="name"value="">氏名<br>
<input type="text" id="home"value="">住所<br>
<input type="button" value="追加"onclick="add()"><br>
<table border="1"cellpadding="5"cellspacing="0" id="table"name="tables">
</table>
<script Language="JavaScript" type="text/javascript">
var i=1;
function add(){
name=document.getElementById("name").value;
home=document.getElementById("home").value;
if(name==0||home==0){
alert("氏名・住所を入力してください");
}
else{
var table = document.getElementById("table");
var row = table.insertRow(-1);
row.id="t"+i;
var cell0=row.insertCell(-1);
var cell1=row.insertCell(-1);
var cell2=row.insertCell(-1);
cell0.appendChild(document.createTextNode(i));
cell1.appendChild(document.createTextNode(name));
home1 = document.createElement("a");
home1.href =home;
home1.appendChild(document.createTextNode("住所検索"));
cell2.appendChild(home1);
}
i++;
}
</script>
</body>
</html>
