<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加單元格</title>
<script type="text/javascript">
var count = 0;
function addRow() {
//創建文本結點
if(count < 0){
count = 0;
}
count++;
var textNode1 = document.createTextNode("單元格"+count);
var textNode2 = document.createTextNode("單元格"+count)
var textNode3 = document.createTextNode("單元格"+count)
//創建td的元素結點
var tdNode1 = document.createElement("td");
var tdNode2 = document.createElement("td");
var tdNode3 = document.createElement("td");
var trNode = document.createElement("tr");
//將文本節點添加到td的元素結點
tdNode1.appendChild(textNode1);
tdNode2.appendChild(textNode2);
tdNode3.appendChild(textNode3);
//獲取tr 和 table 的 結點元素
var tbNode = document.getElementById("tb") ;
//將td結點添加到 tr結點 tr 添加到table
trNode.appendChild(tdNode1);
trNode.appendChild(tdNode2);
trNode.appendChild(tdNode3);
tbNode.appendChild(trNode);
if(count%2==1){
trNode.style.backgroundColor = "#f5c7ff";
}
};
function delRow() {
var tbNode = document.getElementById("tb") ;
tbNode.removeChild(tbNode.lastChild);
count--;
}
</script>
</head>
<body>
<input type="button" value="新增一行" onclick="addRow();" />
<input type="button" value="刪除一行" onclick="delRow();" />
<hr />
<table id="tb" width="500px" border="1" cellpadding="0" cellspacing="0" >
<!-- <tr id = "tr">
<td id="td1">單元格1</td>
<td id="td2">單元格2</td>
<td id="td3">單元格3</td>
</tr>-->
</table>
</body>
</html>javaScript DOM
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
由淺入深在實踐中玩轉Zabbix，解決剩下20%的監控需求！
本文整理自Zabbix中級認證專家李銘栓（滿分學員）在Zabbix Meetup廣州站的演講。 掌握這幾種監控方式解決80%的監控問題，剩下的20%如何實現？這裏有答案！ 幾點經驗分享： 1