<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();
for (var j = 0; j < 5; j++) {
var c = r.insertCell();
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>

原文连接:http://blog.51cto.com/jeoff/225188

js 拼接table 的方法的更多相关文章

  1. js拼接table查询信息部分

    其一: $("#datagrid").empty(); var a=0; <order-rows> a++; $("#datagrid").appe ...

  2. Js 合并 table 行 的实现方法

    Js 合并 table 行 的实现方法 需求如下: 某公司的员工档案,如下,  经理看员工的信息不是很清晰: 姓名 所在学校 毕业时间 张三 小学 2000 张三 中学 2006 张三 大学 2010 ...

  3. html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式

    先上代码   <script type="text/javascript" language="javascript">   var idTmr; ...

  4. 使用ASP.NET MVC局部视图避免JS拼接HTML,编写易于维护的HTML页面

    以前使用ASP.NET WebForm开发时,喜欢使用Repeater控件嵌套的方式开发前台页面,这样就不用JS拼接HTML或者后台拼接HTML了,写出的HTML页面美观.简捷.易于维护,由于不用JS ...

  5. java后台获取和js拼接展示信息

    java后台获取和js拼接展示信息: html页面代码: <div class="results-bd"> <table id="activityInf ...

  6. js操作table倒叙显示序号的问题

    今天遇到一奇葩问题,就是在js添加table时,序号是倒叙显示的,而且数据库查出来时正序的,为什么显示是倒叙的呢? 我百度一番,终于有了结果: var newRow=table.insertRow(- ...

  7. 常见JS(JavaScript)冲突解决方法

    1.一般JS冲突解决办法 a.最容易出现的就是js的命名冲突 ①.变量名冲突 变量有全局变量和局部变量当全局变量变量和局部变量名称一致时,就会js冲突,由于变量传递数值或地址不同就会产生JavaScr ...

  8. IE 不兼容的几个js问题及解决方法

    IE 不兼容的几个js问题及解决方法 1 Table的问题   在动态新增tr或者td时,createElecment() 一般用appendChild();都不生效,解决办法是用新增tbody, 如 ...

  9. IE 不兼容的几个js问题及解决方法1

    IE 不兼容的几个js问题及解决方法 1 Table的问题   在动态新增tr或者td时,createElecment() 一般用appendChild();都不生效,解决办法是用新增tbody, 如 ...

随机推荐

  1. IDEA+PHP+XDebug调试配置

    XDebug调试配置 临时需要调试服务器上的PHP web程序,因此安装xdebug,下面简单记录 安装xdebug 下载最新并解压 wget https://xdebug.org/files/xde ...

  2. 调用接口http封装

    public static String httpHandler(String URL,String xml){ try { URL url=new URL(URL); URLConnection c ...

  3. VirtualBox 安装 Ubuntu 14.04 无法调节分辨率问题

    基础环境 宿主系统:Windows 10 虚拟机系统:Ubuntu 14.04-32bit.Ubuntu 14.04-64bit VirtualBox:5.2.0 r118431 (Qt5.6.2) ...

  4. 【二十五】cookie与session学习总结

    一:cookie 1.创建cookie 关键字:setcookie 用于保存cookie 原理:当浏览器访问cookie.php页面时,我们的服务器就会以set-cookie的方式将cookie信息回 ...

  5. Python学习日记:day8-------文件操作

    文件操作 1,文件路径:d:\xxxx.txt     绝对路径:从根目录到最后     相对路径:当前目录下的文件 2,编码方式:utf-8 3,操作方式:只读,只写,追加,读写,写读...... ...

  6. 如何用jQuery实现五星好评

    jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率. Js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里面来就可以了. 接下 ...

  7. Xamarin截取/删除emoji表情bug解决方案

    大家都知道,一个英文=1字节,一个汉字2字节,而一个emoji表情=4个字节,在有这三种混用的时候,比如app聊天界面,那么删除和截取便成了很头痛的事情. 问题描述 截取导致乱码,如下图: 解决方案 ...

  8. HHVM源码剖析

    一.前言 hhvm源码中充满了很多C++11的新特性,并且使用了各种设计模式如工厂,模板方法等,利用智能指针包裹指针,让delete没有肆意的出现 模板,继承,explicit,纯虚函数的出现令代码中 ...

  9. flask 分页

    在我们学习的过程中会遇到这么样的问题,就是在我们学习的过程中会发现需要分页处理,这里呢,给大家介绍书上说的分页. @app.route('/',methods=['GET']) @app.route( ...

  10. ogg12-ERROR OGG-01031 file D:\OGG\dirdat\ed000000 is not in any allowed output directories

    配置ogg时出现这个错误: 2018-01-04 14:22:58 ERROR OGG-01031 Oracle GoldenGate Capture for Oracle, P147148.prm: ...