<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<script type= "Text/javascript" >
var bcount=1;
var xcount=1;
function Addbao () {
var newrow=baoyang.insertrow (baoyang.rows.length);
Newrow.id= "TRB";
Newrow.ln=bcount;
var Input1=newrow.insertcell (0);
Input1.ln=bcount;
Input1.innerhtml= ' <input id= "typeId" type= "text" name= "typeId" style= "width:40" value= "' +bcount+ '" > ";
var Input2=newrow.insertcell (1);
Input2.ln=bcount;
Input2.innerhtml= ' <input type= "text" id= "Dictcode" name= "Dictcode" style= "width:80" > ";
var Input3=newrow.insertcell (2);
Input3.ln=bcount;
Input3.innerhtml= ' <input type= "text" id= "Dictname" name= "Dictname" style= "width:80" > ";
var Input3=newrow.insertcell (3);
Input3.ln=bcount;
Input3.innerhtml= ' <input type= "text" id= "remark" name= "remark" style= "width:80" > ";
var Del=newrow.insertcell (4);
Del.ln=bcount;
Del.onclick=delbao;
Del.innerhtml= ' <input type= "button" name= "button" style= "width:40" value= "delete" ln= ' +bcount+ ' > ';
bcount++;
}
function Delbao (event) {
var event = event? Event:window.event
var img = event.srcelement? Event.srcElement:event.target;
var trb = document.getElementById ("Baoyang");
var rows = trb.rows;
var trbline=parseint (img.parentelement.ln,10);
if (trbline>0) {
for (Var i=1;i<rows.length;i++) {
if (rows[i].ln==trbline) {
Baoyang.deleterow (i);
}
}
}
}
function Addxin () {
var newrow=xintian.insertrow (xintian.rows.length);
Newrow.id= "TRX";
Newrow.ln=xcount;
var Input1=newrow.insertcell (0);
Input1.ln=xcount;
Input1.innerhtml= ' <input type= "text" id= "Dataid" name= "Dataid" style= "width:40" value= "' +xcount+ '" > ";
var Input2=newrow.insertcell (1);
Input2.ln=xcount;
Input2.innerhtml= ' <input type= "text" id= "Dicdataname" name= "Dicdataname" style= "width:90" > ";
var Input3=newrow.insertcell (2);
Input3.ln=xcount;
Input3.innerhtml= ' <select id= "Dictype" name= "Dictype" > <option value= "" selected= "selected" >[Please select Identity]< /option></select> ';
Del=newrow.insertcell (3);
Del.ln=xcount;
Del.onclick=delxin;
Del.innerhtml= ' <input type= "button" name= "button" style= "width:40" value= "delete" ln= ' +xcount+ ' > ';
xcount++;
}
function Delxin (event) {
var event = event? Event:window.event
var img = event.srcelement? Event.srcElement:event.target;
var trx = document.getElementById ("Xintian");
var rows = trx.rows;
var trline=parseint (img.parentelement.ln,10);
if (trline>0) {
for (Var i=1;i<rows.length;i++) {
if (rows[i].ln==trline) {
Xintian.deleterow (i);
}
}
}
}
</script>
<body>
<table width= "707" cellspacing= "0" cellpadding= "0" border= "0" class= "Uniformstyle" id= "MyForm" >
<tbody>
<tr>
<TD valign= "Top" >
<table class= "Myformstyle" id= "Baoyang" >
<tr id= "TRB" >
<TD style= "width:40" > Serial number </td>
<TD style= "width:80" > Identification code </td>
<TD style= "width:80" > Identity category name </td>
<TD style= "width:80" > Remarks </td>
<TD style= "width:50" ><input type= "button" value= "Add" onclick= "Addbao ()" style= "width:40" ></td>
</tr>
</table>
</td>
</tr>
<tr>
<TD valign= "Top" >
<table class= "Myformstyle" id= "Xintian" >
<tr id= "Trx" >
<TD style= "width:40" > Serial number </td>
<TD style= "width:90" > Name </td>
<TD style= "width:40" > Identification category </td>
<TD style= "width:40" ><input type= "button" value= "Add" onclick= "Addxin ()" style= "width:40" ></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</body>
-----Source http://blog.csdn.net/maypol/article/details/5372744
JS Dynamic Add Delete row, compatible with IE and Firefox