<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("已经没有表格了！！")
}
}
<table border="1"><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>
1、可以使用连接运算符+在多行上显示字符串，这可以使用双引号或单引号来完成。2、可以使用反斜杠(\)转义字符来转义换行符，而不是连接多个字符串。
3、模板文字由反引号字符括起来，该字符串以及源中的换行符将被保留。代码是程序员用开发工具所支持的语言写出来的源文件。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）