<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. 原来你是这样的JAVA[01]-基础一瞥

    1.Java是什么呢? Java不仅是一门语言,而且是一个完整的平台,有一个庞大的库,其中包含了很多可重用的代码和一个提供安全性.跨操作系统的可移植性以及自动垃圾收集等服务的执行环境. 2.JDK 和 ...

  2. Linux主机SSH免密设置解析

    为了保证一台Linux主机的安全,所以我们每个主机登录的时候一般我们都设置账号密码登录.但是很多时候为了操作方便,我们都通过设置SSH免密码登录.那么该如何设置?是不是免密码登录就不安全了呢? 一.被 ...

  3. 用html和css轻松实现康奈尔笔记(5R笔记)模板

    缘起 人家都说康奈尔笔记法,很好用呢,能抵抗遗忘曲线,让你的笔记事半功倍,有兴趣的同学自行百度哈. 网上有很多现成的模板,下载下来之后吧,看着好像在上面写英文可能更方便一点,行距很小,而且还有网址在上 ...

  4. AVL树的单双旋转操作

    把必须重新平衡的节点称为å.对于二叉树,å的两棵子树的高度最多相差2,这种不平衡可能有四种情况: 对å的左儿子的左子树进行插入节点(左-左) 对å的左儿子的右子树进行插入节点(左-右) 对å的右儿子的 ...

  5. 框架原理第三讲,RTTCreate,运行时类型创建.(以MFC框架讲解)

    框架原理第三讲,RTTCreate,运行时类型创建.(以MFC框架讲解) 通过昨天的讲解,我们已经理解了运行时类型识别是什么. 比如  CObject * pthis = (Cobject *)Cre ...

  6. 统计nginx单个IP访问日志并获取IP来源

    #!/usr/bin/env python #coding=utf-8 import requests from urllib2 import urlopen # import lxml.html f ...

  7. 安全扫描工具 Netsparker

    Netsparker是一款web应用安全漏洞扫描工具 Netsparter官网:https://www.netsparker.com/web-vulnerability-scanner/,与其他安全扫 ...

  8. js基础：对DOM进行操作，删除、添加元素

    <body> <div id="div1"> <p id="p1">第一段</p> <p id=" ...

  9. ubuntu环境下python虚拟环境的安装

    一. 虚拟环境搭建 在开发中安装模块的方法: pip install 模块名称 之前我们安装模块都是直接在物理环境下安装,这种安装方法,后面一次安装的会覆盖掉前面一次安装的.那如果一台机器上面开发多个 ...

  10. x的x次幂的值为10，求x的近似值

    public class Main { static double eps = 1e-7; public static void main(String[] args){ double l = 2,r ...