用两种方式创建Table
来源：互联网 发布：利用大数据相关案例 编辑：程序博客网 时间：2024/05/18 20:47
createElement() //创建一个HTML元素
setAttribute() //设置一个属性
appendChild() //向页面或向某个元素里添加元素
removeChild() //删除元素
insertRow() //添加表格行
insertCell() //添加单元格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<mce:script type="text/javascript"><!--
var d = {
fields:["id","name","sex","age"],
datas:[
["1001","张飞","男","21"],
["1002","吕布","男","21"],
["1003","赵云","男","21"],
["1004","曹操","男","21"]
]
};
var arrD = d.datas;
for(var i=0;i<10000;i++){
arrD.push([i,"test","test","test"]);
}
//这是一个相对比较快速的 table 创建方法：
/*
要点1，用array 的join方法而不是用"+"来连接字符串。
要点2，生成的html包裹在一个统一的块级元素中（比如table,div等）提交，而不要分开提交（比如生成多个tr重复添加给一个table）。
*/
function CreateTable(arr){
var arrHTML = [];
for(var i=0,j=arr.length;i<j;i++){
arrHTML.push(arr[i].join("</td><td>"));
}
return "<table><tr><td>" + arrHTML.join("</td></tr><tr><td>") + "</td></tr></table>";
}
//下面创建DOM节点来创建table:
function CreateTableByDom(arr){
var _table = document.createElement("table");
var _tbody = document.createElement("tbody");
var _tr,td;
for(var i=0,j = arr.length;i<j;i++){
_tr = document.createElement("tr");
for(var x=0,y = arr[i].length; x<y; x++){
_td = document.createElement("td");
_td.appendChild(document.createTextNode(arr[i][x]));
_tr.appendChild(_td);
}
_tbody.appendChild(_tr);
}
_table.appendChild(_tbody);
return _table;
}
function testCreateTable(){
var t1=(new Date()).getTime();
document.getElementById("container").innerHTML = CreateTable(arrD);
t2 = (new Date()).getTime();
alert(t2-t1);
}
function testCreateTableByDom(){
var t1=(new Date()).getTime();
document.getElementById("container").appendChild(CreateTableByDom(arrD));
t2 = (new Date()).getTime();
alert(t2-t1);
}
// --></mce:script>
<mce:style type="text/css"><!--
table{
border:#000000 1px solid;
}
td{
border:#000000 1px solid;
}
--></mce:style><style type="text/css" mce_bogus="1">table{
border:#000000 1px solid;
}
td{
border:#000000 1px solid;
}</style>
</head>
<body>
<input type="button" value="生成table innerHTML方法" onclick="testCreateTable()"/>
<input type="button" value="生成table DOM插入方法" onclick="testCreateTableByDom()"/>
<div id="container">
</div>
</body>
</html>
- 用两种方式创建Table
- 用两种方式创建Table
- Lua table 的几种创建方式。
- drupal7中的创建table表格的一种简单方式
- javascript创建二维码(Table/Canvas两种方式)
- 创建Table
- 创建table
- iOS开发基础之用三种不同方式创建Table View应用
- iOS开发基础之用三种不同方式创建Table View应用
- oracle不提供CREATE TABLE IF NOT EXIST方式创建表
- 【转载】【实验】验证通过create table as select 方式无法创建主键小实验
- lua遍历table方式
- DOM创建table
- 动态创建table
- 简单的创建table
- 动态创建table
- 动态创建Table
- 创建一个Table
- js 中有关toFixed的用法
- Table的两个属性rowIndex与cellIndex
- event.cancelBubble的理解
- 有关框架左右同时滚动效果。
- 微软企业库5.0学习笔记（六）创建并引用企业库对象
- 用两种方式创建Table
- 一个GDI资源泄漏检测程序
- iframe中如何插入html
- 鼠标经过改变表格背景属性实例
- 个人开公司的流程，以后用得着
- js生成word文档有关资料
- js实例
- 递归反转一个字符串
- shell学习！
