<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态创建表格增加或者删除列</title>
<style type="text/css">
table {
border-collapse: collapse;
}
tr,
td {
width: 80px;
height: 20px;
border: 1px solid greenyellow;
background-color: #FFC0CB;
}
</style>
<script type="text/javascript">
window.onload = function() {
var oTable = document.createElement("table");
oTable.id = "t"
for (var i = 0; i < 3; i++) {
var oTr = document.createElement("tr");
for (var j = 0; j < 3; j++) {
var oTd = document.createElement("td");
oTr.appendChild(oTd);
}
oTr.id = i
oTable.appendChild(oTr);
}
document.body.appendChild(oTable);
var oBtn = document.getElementById("insb");
oBtn.onclick = function() {
for (var i = 0; i < 3; i++) {
toString(i);
var oTr0 = document.getElementById(i);
var oTd = document.createElement("td");
oTr0.appendChild(oTd);
}
}
var oDel = document.getElementById("delb");
oDel.onclick = function() {
for (var i = 0; i < 3; i++) {
toString(i);
var oTr0 = document.getElementById(i);
oTr0.removeChild(oTr0.lastElementChild);
}
}
}
</script>
</head>
<body>
<input type="button" id="insb" value="ins">
<input type="button" id="delb" value="del">
</body>
</html>
