原文:
http://abaper.blogbus.com/logs/8278500.html
本来是想测试一下使用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创建表格的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </...
我自己写的,那出来与大家分享:javascript下动态创建表格的三种方式
javascript动态创建表格,适合HTML语言初学者使用,亲测可用
使用JavaScript和DOM动态创建表格
Javascript动态创建表格 兼容google浏览器、360,ie等浏览器,很实用
javascript动态创建表格.doc
* 自定义javascript常用基础库 author zhang_jhai 创建时间 2010/04/10 最后修改时间 2010/05/03 * version 2.0 */ // Base库基础类 BaseJs = function() { // 判断浏览器类型 userAgent = navigator....
利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种方法,看下面的解决和使用方法
创建表JS createTable.js是一个旨在仅使用 javascript 快速轻松地创建 html 表格的库。 下载 版本 版本 0.1 如何使用此代码 见文件 接触 开发商/公司 主页:建设中 电子邮箱: 推特:
用javascript编译的 javascript创建对话表格.html
javaScript动态创建表格
用js创建动态表格一些基本语法 avascript 动态创建表格:新增、删除行和单元格 利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。
实现页面创建表格,和删除指定列、行单元格功能。利用JavaScript动态创建表格,可根据用户的使用需求动态添加指定列数、行数,删除指定列数、行数。删除成功或不成功时,会反馈给用户一个弹框提示,增强用户体验感。
NULL 博文链接:https://phf123456-yeah-net.iteye.com/blog/716950
本文实例讲述了javascript动态创建表格及添加数据的方法。分享给大家供大家参考。具体分析如下: 1. 动态创建表格(代码不兼容IE6) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...
利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧。
本文给大家总结了2种使用javascript动态创建表格的方法,非常简单实用,小伙伴们自己对比下看看哪种更适合你呢,一般本人是使用第一种的。