javascript 操作table的特性

时间:2020-05-12 人气:0

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title>javascript操作table的特性</title> 
<script type="text/javascript"><!-- 
function f(){ 
//创建一个表格 
var oTable = document.createElement("table"); 
oTable.setAttribute("border","1"); 
oTable.setAttribute("width","300px"); 
// 
var oTBody = document.createElement("tbody"); 
oTable.appendChild(oTBody); 
//创建第一行 
oTBody.insertRow(0); 
oTBody.rows[0].insertCell(0); 
oTBody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1")); 
oTBody.rows[0].insertCell(1); 
oTBody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1")); 
//创建第二行 
oTBody.insertRow(1); 
oTBody.rows[1].insertCell(0); 
oTBody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2")); 
oTBody.rows[1].insertCell(1); 
oTBody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2")); 
// jb51.net
document.body.appendChild(oTable); 
}

// --></script> 
</head> 
<body onclick="f();"> 
<div>hello</div> 
<table border="1" width="300px"> 
<tbody> 
<tr> 
<td>Cell 1,1</td> 
<td>Cell 2,1</td> 
</tr> 
<tr> 
<td>Cell 1,2</td> 
<td>Cell 2,2</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

可以直接点击页面的任何部分即可看到效果。

加载全部内容