FOR SE

文系の学部から新卒でメーカー系のSIerに就職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界に就職

このエントリーをはてなブックマークに追加

【Javascript】動的なテーブルの追加

お客さんの業務から自分達の業務まで、テーブル構造で情報をまとめるということはよくあると思います。

 

 

 

グレープシティ社などからもエクセルライクをWebで実現するパッケージなどもでています。

 

参考URL:http://www.grapecity.com/tools/products/spread7

 

 

と言うことで、今回はテーブルを動的に追加することを行ってみます。

 

手順としては、以下です。

 

0、テキストボックスの値をテキストボックスIDから取得

1、テーブルのIDの取得

2、rowエレメントの追加

3、セルエレメントの追加

4、セルエレメントに「0」で取得した値の代入

 

といった感じ。

 

 

IDの取得を行い、特定のエレメントのオブジェクトを取得できるのは大変便利。

たとえば、

 

 ・入力されたテキストボックスからの値の取得

 ・画面上に複数存在するボタンのどれが押下されたかの取得(同一functionでOKに  なる)

 など、特定オブジェクトのプロパティを変えたり、イベントを設定できる。

 

 

以下、ソース

※ここはこうした方がいいとかというアドバイス、是非ください。

周りにJSのできる人がいなくて、インプットが書籍とネット

だけなので、、、

 

<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>

 

 

 

.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }