您的位置：首页 > Web前端 > JavaScript

JavaScript入门（五）操作表格

2015-05-25 00:16 260 查看

<html>
<head>
<title>DOM文档对象模型 --操作表格和样式</title>

<script>
//thead, tfoot 只能有一个
//tbody可以有多个

//使用DOM创建表格

window.onload=function(){
var table = document.createElement('table');
table.width=300;//table.setAttribute('width',300);
table.border=1;
var caption=document.createElement('caption');
table.appendChild(caption);
caption.innerHTML='人员表';
var captionText=document.createTextNode('人员表');
caption.appendChild(captionText);

var thead=document.createElement('thead');
table.appendChild(thead);

var tr=document.createElement('tr');
thead.appendChild(tr);

var th=document.createElement('th');
tr.appendChild(th);

th.appendChild(document.createTextNode("数据1"));
th.appendChild(document.createTextNode("数据2"));

document.body.appendChild(table);
}

</script>

</head>

<body >
<table border='1' width='300'>
<caption>人员表</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<th>张三</th>
<th>男</th>
<th>22</th>
</tr>
<tr>
<th>李四</th>
<th>男</th>
<th>22</th>
</tr>
</tbody>
<tbody>
<tr>
<th>王五</th>
<th>男</th>
<th>22</th>
</tr>
<tr>
<th>人六</th>
<th>男</th>
<th>22</th>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='3'>合计：2人</td>
</tr>
</tfoot>

</table>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航