新卒から文系エンジニア→人材業界に転職した人のブログ

新卒から文系エンジニア→人材業界に転職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界へ。異業種×異職種の転職経験有り。

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

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

 

.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; }