<tbody id="new">
<tr><td>a</td><td>1</td></tr>
<tr><td>b</td><td>2</td></tr>
<tr><td>c</td><td>3</td></tr>
</tbody>
</table>
<script type="text/javascript">
var table = document.getElementById("new")
// 增加行
var newTR= document.createElement("tr")
var newTD1 = document.createElement("td")
var newText1 = document.createTextNode("d")
var newTD2 = document.createElement("td")
var newText2 = document.createTextNode("4")
newTD1.appendChild(newText1)
newTD2.appendChild(newText2)
newTR.appendChild(newTD1)
newTR.appendChild(newTD2)
table.appendChild(newTR)
//增加列
var tr = table.getElementsByTagName("tr")
for(var i=0i<tr.lengthi++) {
var newTD = document.createElement("td")
var newText = document.createTextNode(i)
newTD.appendChild(newText)
tr[i].appendChild(newTD)
}
</script>
<!DOCYPE html><html>
<head>
<meta charset="UTF-8">
<title>
window.navigator
</title>
<style>
td {
border: 1px solid gray
padding: 3px 5px
}
</style>
<script>
onload = function(){
var tab = document.getElementsByTagName("table")[0]
var rows = tab.rows
var th = document.createElement("th")
th.innerHTML = "选择"
rows[0].insertBefore(th,rows[0].cells[0])
for(var i = 1 i < rows.length i++){
var td = rows[i].insertCell(0)
var ck = document.createElement("input")
ck.type = "checkbox"
td.appendChild(ck)
}
}
</script>
</head>
<body>
<table>
<tr>
<th>
数量
</th>
<th>
原价
</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</body>
</html>
页面代码：<body>
<h1 style="color: blue">
<input type="button" value="插入表"
onclick="javascript:insertTable(5,6)" />
</h1>
<h1 style="color: #fcdb33">
您也可以删除创建的所有表格，请点击按钮
<input type="button" id="del" value="删除表格"
onclick="javascript:delTable()" />
</h1>
<div id="container"></div>
</body>
js代码：
/**
* 插入表格
* @param row 行数
* @param col 列数
* @return
*/
function insertTable(row,col) {
//页面要有个标签可以放即将创建的table，我用了div，你也可以用别的标签
var div = document.getElementById("container")
var table = document.createElement("table")
div.appendChild(table)
table.border = "1px"
table.style.width = "750px"
table.style.height = "250px"
table.style.color = "green"
//少了这个tbody元素，在IE下将无法正常显示table
var body = document.createElement("tbody")
table.appendChild(body)
for ( var n = 0n <parseInt(row)n++) {
var tr = document.createElement("tr")
body.appendChild(tr)
tr.style.color = "red"
for ( var i = 0i <parseInt(col)i++) {
var td = document.createElement("td")
tr.appendChild(td)
td.style.color = "orange"
var center = document.createElement("center")
td.appendChild(center)
center.innerHTML="行列"
}
}
}
/**
* 删除表格
*
* @return
*/
function delTable() {
var div = document.getElementById("container")
var tCount = div.childNodes.length
if (tCount >0) {
var t = document.getElementsByTagName("table")[0]
if (div == t.parentNode)
div.removeChild(t)
} else {
alert("已经没有表格了！！")
}
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）