js dynamically add and delete rows example code

html >

head >

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 = ' >Yes input type= "radio" value= "1" name= "rdo' + count + '" >No';

var chk = tr.insertCell(3);

chk.innerHTML = ' >Modify input type= "checkbox" value= "1" name= "chk' + count + '" >Delete';

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

}

//-- >

script >

head >

body >

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

table border= "1" style= "width:100%" id= "ci" name= "ci" >

caption >customer information caption >

thead >

tr >

th >Name th >

th >Tel th >

th >Radio th >

th >CheckBox th >

th > th >

tr >

thead >

tbody >

tr >

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

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

td >

input type= "radio" value= "0" name= "rdo" >Yes input type= "radio" value= "1" name= "rdo" >No

td >

input type= "checkbox" value= "0" name= "chk" >Modify input type= "checkbox" value= "1" name= "chk" >Delete

td >

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

td >

tr >

tbody >

table >

body > html >