好用的动态增删行,很好用...
<html>
<head></head>
<body>
<script type="text/javascript" >
function tableAdd(){
var rownum = table1.rows.length;
var newRow = table1.insertRow(rownum);
newRow.insertCell(0).innerHTML=document.all.div1.innerHTML;
newRow.insertCell(1).innerHTML=document.all.div2.innerHTML;
newRow.insertCell(2).innerHTML=document.all.div3.innerHTML;
newRow.insertCell(3).innerHTML=document.all.div4.innerHTML;
}
function tableDel(){
var rowIndex = getRowIndex();
table1.deleteRow(rowIndex);
}
function getRowIndex(){
try{
var Elm = event.srcElement;
while(Elm && Elm.tagName != "TR"){
Elm = Elm.parentElement;
}
var intRowIndex = Elm.rowIndex;
return intRowIndex;
}catch(ex){
}
}
</script>
<table id="table1" border="1" width="50%">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td><input type="button" οnclick="javascript:tableDel();" value="DEL"/></td>
</tr>
</table>
<table width="50%">
<tr>
<td align="center"><input type="button" οnclick="javascript:tableAdd();" value="Add"/>
</td>
</tr>
</table>
<div id="div1" style="display:none">
<input type="text" value="div1"/>
</div>
<div id="div2" style="display:none">
<input type="text" value="div2"/>
</div>
<div id="div3" style="display:none">
<input type="text" value="div3"/>
</div>
<div id ="div4" style="display:none">
<input type="button" οnclick="javascript:tableDel();" value="DEL"/>
</div>
</body>
</html>