【Javascript】動的なテーブルの追加+選択した行を削除する
動的なテーブルシリーズです。
この前の記事の流れとして、動的にテーブルを生成して操作を行うという
ことを紹介してきました。
グレープシティ社などからもエクセルライクをWebで実現するパッケージなどもでています。
参考URL:http://www.grapecity.com/tools/products/spread7
今回は、追加したテーブルの行を削除するという事をしたいと思います。
【処理の流れ】
処理の流れとしては、以下です。
0、テキストボックスの値をテキストボックスIDから取得
1、テーブルのIDの取得
2、rowエレメントの追加
3、セルエレメントの追加
4、セルエレメントに「0」で取得した値の代入
5、削除ボタンをクリック時、削除ボタンのIDを取得
6、削除ボタンのIDから選択行を判定し、削除
7、削除後、行番号を振り直す
という処理の流れになっています。
【改善点】
以下の点で不具合があります。(単発の動作な問題ないですが)
・削除ボタンから、親となる行のIdを取得(処理の流れで言うとNo6)できていない(DO Mを学習すれば取得できる?)
・複数削除を行うと最後の行が削除行くなる
もし、JSやDOMについて詳しい方がいたらアドバイスをいただけると幸いです、
【ソース】
以下ソース。
<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;
var cell0=row.insertCell(-1);
var cell1=row.insertCell(-1);
var cell2=row.insertCell(-1);
var cell3=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);
del=document.createElement("input");
del.id="del"+i;
del.type="button";
del.value="削除"+i;
cell3.appendChild(del);
del.onclick=delrow;
}
i++;
}
<!--行削除処理-->
function delrow(){
str=new String();
str=document.getElementById(this.id).value;
index=str.charAt(2);
document.getElementById("table");
table.deleteRow(index-1);
getrows();
;}
<!--行番号の取得-->
function getrows(){
tlsize=document.getElementById("table");
rownum=1;
for(k=0;k<tlsize.rows.length;k++){
tlsize.rows[k].id="t"+rownum;
tlsize.rows[k].cells[0].innerText=rownum;
tlsize.rows[k].cells[3].id="del"+rownum;
document.getElementById("del"+rownum).value="削除"+rownum;
rownum++;
}
rownum=0;
}
</script>
</body>
</html>