<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格删除和增加</title>
<script type="text/javascript">
var rowNum = 1;
var colors = ["#FF0000","#00FF00","#0000FF","#FFFF00","#FF00FF","#00FFFF","#ABCDEF","#DEF123"];
function addRow(){
var txtNode1 = document.createTextNode("单元格内容"+rowNum);
var txtNode2 = document.createTextNode("单元格内容"+rowNum);
var txtNode3 = document.createTextNode("单元格内容"+rowNum);
var tdNode1 = document.createElement("td");
var tdNode2 = document.createElement("td");
var tdNode3 = document.createElement("td");
tdNode1.appendChild(txtNode1);
tdNode2.appendChild(txtNode2);
tdNode3.appendChild(txtNode3);
var trNode = document.createElement("tr");
trNode.appendChild(tdNode1);
trNode.appendChild(tdNode2);
trNode.appendChild(tdNode3);
var index = Math.floor(Math.random()*8);
trNode.style.backgroundColor = colors[index];
var tableNode = document.getElementById("tb");
tableNode.appendChild(trNode);
rowNum++;
}
function delRow(){
var tableNode = document.getElementById("tb");
tableNode.removeChild(tableNode.lastElementChild);
rowNum--;
}
</script>
</head>
<body>
<input type="button" value="新增一行" onclick="addRow();" />
<input type="button" value="删除一行" onclick="delRow();" />
<hr />
<table id="tb" width="500" border="1">
</table>
</body>
</html>
