对于动态增加一行、删除一行、删除所有行都可以操作成功。
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>?
<%??
String path = request.getContextPath();??
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";??
%>?
?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">?
<html>?
? <head>?
<base href="<%=basePath%>">
<title>HelloWorld! Applet</title>?
<script>??
? function rowsAdd(){??
???? var Container = document.getElementById("play");??
???? var detailNum = Container.rows.length;??
???? //var _table=document.getElementById("takesheetspec");??
???? var _tr=Container.insertRow(-1);??
???? //alert(_tr.rowIndex);??
???? var _id='pd'+detailNum;??
???? for(var i=0;i<8;i++)??
????? {??
?????? var _td=_tr.insertCell(i);??
?????? _tr.id=_id;????
??????? switch(i)??
???????? {??
????????? case 0:??
???????????? _td.id="cell"+detailNum;??
???????????? _td.innerHTML=detailNum+"<a href='#' name='delete' onclick=tabledel("+detailNum+")>删除</a>";??
???????????? break;??
????????? case 1:??
???????????? _td.innerHTML="<input type='text' size='7'>";????
???????????? break;??
????????? case 2:??
???????????? _td.innerHTML="<input type='text' size='7'>";????
???????????? break;??
????????? case 3:??
???????????? _td.innerHTML="<input type='text' size='7'>";????
???????????? break;??
????????? case 4:??
??????????? _td.innerHTML="<input type='text' size='7'>";????
???????????? break;?????
????????? case 5:??
????????????? _td.innerHTML="<input type='text' size='7'>";????
???????????? break;??
????????? case 6:??
???????????? _td.innerHTML="<input type='text' size='7'>";????
???????????? break;???
????????? case 7:??
???????????? _td.innerHTML="<input type='text' size='7'>";????
???????????? break;???
???????? case 8:??
???????????? _td.innerHTML="<input type='text' size='7'>";????
???????? break;??
???????? }??
????? }????????
}??
function tabledel(row)??
{??
??? var Container = document.getElementById("play");??????????
??????? //alert(document.getElementById('index').value);??????
??????? var _tr=document.getElementById("pd"+row);????
??????? row=_tr.rowIndex;??
??????? Container.deleteRow(row);?????
??????? var LastTrIndex = Container.rows.length;??
??????? //var afterDel=row-1;??
??????? row+=1;??
??????? for(row;row<=LastTrIndex;row++) {??
??????????? var _td=document.getElementById("cell"+row);??????
??????????? var _tr=document.getElementById("pd"+row);????
??????????? var newRow=_tr.rowIndex;??
??????????? _tr.id='pd'+newRow;??
??????????? _td.id="cell"+newRow;??
??????????? _td.innerHTML=newRow+"<a href='#' name='delete' onclick=tabledel("+newRow+")>删除</a>";??
??????? }??
}??
function tabAllDel()???
{??
var Container = document.getElementById("play");??
Container.firstChild.removeNode(true);??
//增加一行??
var tr=Container.insertRow(-1);??
var? cell? =? tr.insertCell(0);?????
cell.innerHTML = " ";??
cell? =? tr.insertCell(1);?????
cell.innerHTML = "姓名";?????
cell? =? tr.insertCell(2);?????
cell.innerHTML = "性别";???
cell? =? tr.insertCell(3);?????
cell.innerHTML = "年龄";???
cell = tr.insertCell(4);???
cell.innerHTML = "QQ";???
cell = tr.insertCell(5);???
cell.innerHTML = "MSN";???
cell= tr.insertCell(6);???
cell.innerHTML = "E-mail";??????
cell= tr.insertCell(7);???
cell.innerHTML = "备注";?????????
}??
? </script>???
</head>?
? <body>?
? <a href="#" onclick="rowsAdd()">新增行</a>?
? <a href="#" onclick="tabAllDel()">删除所有行</a>?
? <table id="play">?
??? <tr>?
??????? <td> </td>?
??????? <td>姓名</td>?
??????? <td>性别</td>?
??????? <td>年龄</td>?
??????? <td>QQ</td>?
??????? <td>MSN</td>?
??????? <td>E-mail</td>?
??????? <td>备注</td>?
??? </tr>?
? </table>?
? </body>?
</html>?
?