【Javascript】動的なテーブルの追加＋選択したテーブルの行に着色する
動的なテーブルシリーズです。
この前の記事の流れとして、
グレープシティ社などからもエクセルライクをWebで実現するスプレッドというパッケージなどもでているなどといったことを紹介しました。
参考ＵＲＬ：http://www.grapecity.com/tools/products/spread7
と言うことで、今回もテーブルを動的に追加することに関連したものを扱います。
【追加したテーブルの行に着色する部品】
今回は、追加したテーブルの行に着色を行うという事をしたいと思います。
Ｗｅｂページでテーブルに値を入れて、大量のデータを閲覧する場合、このような機能があった方がよいと思われます。
自分の所属していたプロジェクトでもこれと同様の機能が実装されていました。
※実現方法は違いましたが、、、
【処理手順】
手順としては、以下です。
０、テキストボックスの値をテキストボックスIDから取得
１、テーブルのＩＤの取得
２、テーブルＩＤを取得したテーブルにrowエレメントの追加
３、追加したrowエレメントにセルエレメント追加する
４、セルエレメントに「０」で取得した値を代入
５、行をクリック時、行のＩＤを取得
６、取得したＩＤの行を着色する
【ポイント】
ポイントは、
・グローバル変数で行のＩＤをつけること
→行を作成するfunctionの行った回数だけidの値が増えるように
関数の外で変数を宣言し、カウントアップする必要がある
・this.idで選択された行のidを取得
どの行を選択するかは、行作成時では不明。したがって、行を選択時に、this.idを使用して
選択されたidを取得する
【ソース】
以下ソース。
<html>
<head></head>
<body>
<h2>選択したテーブルを着色する部品</h2>
<input type="text" id="linkname"value="">リンク名<br>
<input type="text" id="link"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(){
linkname=document.getElementById("linkname").value;
link=document.getElementById("link").value;
<!--入力チェック-->
if(linkname==0||link==0){
alert("リンク名またはリンク先を入力してください");
}
else{
var table = document.getElementById("table");
var row = table.insertRow(-1);
row.id="t"+i;
row.onclick=ChageColorRow;
var cell0=row.insertCell(-1);
var cell1=row.insertCell(-1);
var cell2=row.insertCell(-1);
cell0.appendChild(document.createTextNode(i));
cell1.appendChild(document.createTextNode(linkname));
link1 = document.createElement("a");
link1.href =link;
link1.appendChild(document.createTextNode("リンク先"));
cell2.appendChild(link1);
}
i++;
}
function ChageColorRow(){
var rowcolor = document.getElementById(this.id);
rowcolor.style.backgroundColor = "#ccffff";
}
</script>
</body>
</html>
