<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. 基于低代码平台（Low Code Platform）开发中小企业信息化项目

    前言:中小企业信息化需求强烈,对于开发中小企业信息化项目的软件工作和程序员来说,如何根据中小企业的特点,快速理解其信息化项目的需求并及时交付项目,是一个值得关注和研讨的话题. 最近几年来,随着全球经济 ...

  2. jersey框架实现文件上传

    jersey框架是一个开源的RESTful的框架,实现了实现了JAX-RS规范,进一步地简化 RESTful service 和 client 开发.当然而且是必须的,jersey对文件的上传和下载也 ...

  3. 关于python的itertools模块

    这是一个强大的模块 先来看一下它都有什么工具 无穷循环器 迭代器         参数         结果                                               ...

  4. Mac环境下实现alias重命名命令(永久生效)

    Mac环境下实现alias重命名命令 iOS Dev在使用Xcode完成代码编写后,可能需要上传至第三方分发应用给测试人员进行相关测试,比如蒲公英.FIR. 效率较高的上传方式是借助于Fastlane ...

  5. 串String（2）：串的实现（堆分配存储表示法）

    7/27/2017,先占个位,最近事情比较忙,明天敲一波代码,预测在一星期内搞定 9/02/2017,看到这个十分汗颜,八月去美帝学习了,没有抽空补上这一博文,计划这个月开了数据结构课后补上

  6. Mac中Eclipse安装和使用svn

    Eclipse版本为Neon Release (4.6.0) 安装svn 安装HomeBrew 在终端中输入 ruby -e "$(curl -fsSL https://raw.github ...

  7. Scala 安装 Exception in thread "main" java.lang.VerifyError: Uninitialized object exists on backward branch 96

    windows下载安装完最新版本的Scala(2.12.4)后,终端如下错误 C:\Users\Administrator>scala -versionException in thread & ...

  8. Achartengine.jar绘制动态图形一 --饼图

    PS:我们在做安卓程序的时候,免不了会做一些图形,自己可以选择自定义view ,就是用Canvas画,也可以用写好的jar包,就是achartengine.jar,使用jar包的好处就快速绘制图形,不 ...

  9. Locust no-web 模式与参数详解

    读前参考:<性能测试工具Locust > 熟悉 Apache ab 工具的同学都知道,它是没有界面的,通过命令行执行. Locust 同样也提供的命令行运行,好处就是更节省客户端资源. 命 ...

  10. [SDOI2009]E&D

    题目描述 小E 与小W 进行一项名为“E&D”游戏. 游戏的规则如下: 桌子上有2n 堆石子,编号为1..2n.其中,为了方便起见,我们将第2k-1 堆与第2k 堆 (1 ≤ k ≤ n)视为 ...