jsで行を動的に追加および削除するサンプルコード

html >

頭 >

title >js-sample title >

script type= "text/javascript" >

<!--

var count = 1;

function add() {

var tbl = document.all.ci;

var rows = tbl.rows.length;

var tr = tbl.insertRow(rows);

var name = tr.insertCell(0);

name.innerHTML = ' ';

var tel = tr.insertCell(1);

tel.innerHTML = ' ';

var rdo = tr.insertCell(2);

rdo.innerHTML = ' >はい input type= " radio" value= "1" name= "rdo' + count + '" >いいえ';

var chk = tr.insertCell(3);

chk.innerHTML = ' >変更 input type= " checkbox" value= "1" name= "chk' + count + '" >削除';

var del = tr.insertCell(4);

del.innerHTML = ' ';

count++;

}

function del(btn) {

var tr = btn.parentElement.parentElement;

var tbl = tr.parentElement;

tbl.deleteRow(tr.rowIndex-1);

}

//-- >

スクリプト >

頭 >

ボディ >

input type= "button" onclick= "add()" value= "Add-Customer" >

table border= "1" style= "width:100%" id= 「ci」 名前= 「ci」 >

caption >顧客情報 caption >

頭 >

tr >

th >名前 th >

番目 >Tel 番目 >

th >ラジオ th >

th >CheckBox th >

th > th >

tr >

頭 >

誰か >

tr >

td > input type= "text" value= "Zhang San" > td >

td > input type= "text" 値= "111" > td >

td >

input type= "radio" value= "0" name= "rdo" >はい input type= "radio" value= " 1" name= "rdo" >いいえ

td >

input type= "checkbox" value= "0" name= "chk" >変更 input type= 「チェックボックス」 value= "1" name= "chk" >削除

td >

input type= "button" onclick= "del(this)" value= "削除" >

td >

tr >

tbody >

テーブル >

body > html >