2011-07-21 11:26
本来是想测试一下使用Javascript生成一个比较大的表格,大概需要多长时间,一直认为这会是一个比较固定的时间。期间用了几种不同的方法,发现效率相差太大了。下面是测试的具体说明:
目标:生成一个2000*5的表格,每个单元格的内容是行号+逗号+列号
方法一:使用createElement生成表格,使用insertRow和insertCell方法生成行列,单元格的内容使用innerHTML属性进行填充。
方法二:使用createElement生成表格,使用CreateElement方法生成行列,单元格的内容使用了createTextNode方法填充。
方法三:拼接表格innerHTML属性的字符串,使用字符串 += 操作符链接字符串
方法四:拼接表格innerHTML属性的字符串,各个字符串追加数组里面,最后调用数组的join方法生成目标字符串。
运行时间比较:
方法 运行时间(ms)
方法一 93037
方法二 3341
方法三 2795
方法四 500
具体的程序如下:
<html>
<head>
<title>test page</title>
<script type='text/javascript'>
<!--
function createTable() {
var t = document.createElement('table');
for (var i = 0; i < 2000; i++) {
var r = t.insertRow(0);
for (var j = 0; j < 5; j++) {
var c = r.insertCell(0);
c.innerHTML = i + ',' + j;
}
}
document.getElementById('table1').appendChild(t);
t.setAttribute('border', '1');
}
function createTable2() {
var t = document.createElement('table');
var b = document.createElement('tbody');
for (var i = 0; i < 2000; i++) {
var r = document.createElement('tr');
for (var j = 0; j < 5; j++) {
var c = document.createElement('td');
var m = document.createTextNode(i + ',' + j);
c.appendChild(m);
r.appendChild(c);
}
b.appendChild(r);
}
t.appendChild(b);
document.getElementById('table1').appendChild(t);
t.setAttribute('border', '1');
}
function createTable3() {
var data = '';
data += '<table border=1><tbody>';
for (var i = 0; i < 2000; i++) {
data += '<tr>';
for (var j = 0; j < 5; j++) {
data += '<td>' + i + ',' + j + '</td>';
}
data += '</tr>';
}
data += '</tbody><table>';
document.getElementById('table1').innerHTML = data;
}
function createTable4() {
var data = new Array();
data.push('<table border=1><tbody>');
for (var i = 0; i < 2000; i++) {
data.push('<tr>');
for (var j = 0; j < 5; j++) {
data.push('<td>' + i + ',' + j + '</td>');
}
data.push('</tr>');
}
data.push('</tbody><table>');
document.getElementById('table1').innerHTML = data.join('');
}
function showFunctionRunTime(f) {
var t1 = new Date();
f();
var t2 = new Date();
alert(t2 - t1);
}
//-->
</script>
</head>
<body>
<div id="table1" style="border: 1px solid black">
</div>
<script>
showFunctionRunTime(createTable);
showFunctionRunTime(createTable2);
showFunctionRunTime(createTable3);
showFunctionRunTime(createTable4);
</script>
</body>
</html>
分享到:
相关推荐
javascript动态创建表格,适合HTML语言初学者使用,亲测可用
我自己写的,那出来与大家分享:javascript下动态创建表格的三种方式
使用JavaScript和DOM动态创建表格
Javascript动态创建表格 兼容google浏览器、360,ie等浏览器,很实用
javascript动态创建表格.doc
javascript动态操作表格 1.添加表格 2.删除表格 3.选种表格 4.支持IE6.0和Firefox浏览器
javaScript动态创建表格
javascript动态添加表格数据行 在很多web应用中,我们会遇到很多需要动态插入多行纪录的地方。比如,在人才网站上,我们填写简历的时候,我们要填写我们的项目经验,我们可以根据自己的实际情况动态的添加条数,这种...
用js创建动态表格一些基本语法 avascript 动态创建表格:新增、删除行和单元格 利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。
如资源名,使用JAVASCRIPT动态创建一个Select元素和text元素
本文实例讲述了javascript动态创建表格及添加数据的方法。分享给大家供大家参考。具体分析如下: 1. 动态创建表格(代码不兼容IE6) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...
NULL 博文链接:https://phf123456-yeah-net.iteye.com/blog/716950
用JavaScript制作的动态表格,有添加、删除、全选、全不选,有对动态新增的域校验问题,有对新增的域设置readonly问题,还有对新增域中的span进行隐藏问题都有解决,还有对动态表格的讲解PPT一份。
javascript动态创建链接的方法.docx
利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种方法,看下面的解决和使用方法
javascript实现的动态增减表格 dom ie
NULL 博文链接:https://long316.iteye.com/blog/1393886
本文给大家总结了2种使用javascript动态创建表格的方法,非常简单实用,小伙伴们自己对比下看看哪种更适合你呢,一般本人是使用第一种的。
javascript动态增删表格行
JAVASCRIPT 动态复制表格,不错的脚本,推荐你看下了。