<!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);
//創建三個元素結點td
var tdNode1 = document.createElement("td");
var tdNode2 = document.createElement("td");
var tdNode3 = document.createElement("td");
//將三個文本結點依次添加到元素結點td中
tdNode1.appendChild(txtNode1);
tdNode2.appendChild(txtNode2);
tdNode3.appendChild(txtNode3);
//創建一個元素結點tr
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];
//將trNode添加到table中
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">
<!--
<tr>
<td>單元格內容</td>
<td>單元格內容</td>
<td>單元格內容</td>
</tr>
-->
</table>
</body>
</html>
表格的增加和刪除
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章