<html>
<head>
<title>添加新的行</title>
</head>
<body>
<div onclick="addTr()">添加</div>
<table id="myTable" border="1">
<input type="hidden" value="0" id="myInput"/>
<tr id="myTr0">
<td>姓名</td>
<td>性别</td>
<td>操作</td>
</tr>
</table>
</body>
</html>
<script>
/**
* 添加一行
*/
function addTr(){
var tab = document.getElementById("myTable");
var rowNum = tab.rows.length;
var myInput=document.getElementById("myInput").value;
myInput=parseInt(myInput)+1;
document.getElementById("myInput").value=myInput;
var newTr = tab.insertRow();//生成一个新的行
newTr.id="tr"+myInput;
newTd0=newTr.insertCell(0);//生成一个新的列
newTd0.innerText="AAAA";
newTd1=newTr.insertCell(1);
newTd1.innerText="男";
newTd2=newTr.insertCell(2);
newTd2.innerHTML="<span onclick=delRow(this)>删除"+myInput+"</span>";
document.getElementById("myTable").lastChild.appendChild(newTr); //添加到表格中
}
/**
* 删除一行
*/
function delRow(obj){
var tab = document.getElementById("myTable");
var parNode = obj.parentNode.parentNode.rowIndex;
tab.deleteRow(parNode);//删除一行
}
</script>