码迷,mamicode.com
首页 > Web开发 > 详细

js中创建table表格

时间:2016-08-05 08:48:27      阅读:773      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function createTable(){
var table = document.createElement("table");
table.border = "1";
table.width = "100%";

//table API
//创建一行
//var tr = table.insertRow(table.rows.length);
//创建单元格
//var td = tr.insertCell(tr.cells.length);
var tr,td;
for(var i=0;i<6;i++){
//循环插入元素
tr = table.insertRow(table.rows.length);
if(i%2 === 0){
tr.style.backgroundColor = "red";
}else{
tr.style.backgroundColor = "green";
}
for(var j=0;j<5;j++){
td = tr.insertCell(tr.cells.length);
td.innerHTML = "第"+i+"行,第"+j+"列";
td.align = "center";

}
}

//td.innerHTML = "测试";

document.querySelector("#tb").appendChild(table);
}
</script>
</head>
<body>
<input type="button" onclick="createTable()" value="createTable">
<hr>
<div id="tb"></div>
</body>
</html>

js中创建table表格

标签:

原文地址:http://www.cnblogs.com/hwgok/p/5739822.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!