JavaScript入门(五)操作表格

<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>

你可能感兴趣的:(JavaScript入门(五)操作表格)