文档章节

JS动态创建表格(转载他人)

leona_lily
 leona_lily
发布于 2015/04/14 10:44
字数 406
阅读 5
收藏 1

目标:生成一个2000*5的表格,每个单元格的内容是行号+逗号+列号 (转别人的)

方法一:使用createElement生成表格,使用insertRow和insertCell方法生成行列,单元格的内容使用innerHTML属性进行填充。

方法二:使用createElement生成表格,使用CreateElement方法生成行列,单元格的内容使用了createTextNode方法填充。

方法三:拼接表格innerHTML属性的字符串,使用字符串 += 操作符链接字符串

方法四:拼接表格innerHTML属性的字符串,各个字符串追加数组里面,最后调用数组的join方法生成目标字符串。

<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>



本文转载自:

共有 人打赏支持
leona_lily
粉丝 9
博文 96
码字总数 37848
作品 0
朝阳
程序员
利用javax.tools动态编译执行java代码

 本文永久地址:https://my.oschina.net/bysu/blog/1552933 inkfish原创,请勿商业性质转载,转载请注明来源(http://blog.csdn.net/inkfish )。   参考:使用 javax.tools 创建动态应用...

不最醉不龟归
2017/10/18
0
0
TypeScript VS JavaScript 深度对比

TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言,我们已经熟知 TypeScript 是 JavaScript 的一个超集,但是 TypeScript 与 JavaScript 之间又有什么样的区别呢?在选择开...

powertoolsteam
06/29
0
0
IE与Firefox的几个javascript兼容问题及解决

项目中遇到的问题 javascript动态创建页面元素 代码: var hName=document.createElement("<input type='hidden' name='midNames'>"); ie下能正常执行,Firefox下执行不了 解决办法: var h ...

Leonard207
2013/03/13
0
0
javascript性能优化:创建javascript无阻塞脚本

  javaScript 在浏览器中的运行性能,在web2.0时代显得尤为重要,成千上万行javaScript代码无疑会成为性能杀手, 在较低版本的浏览器执行JavaScript代码的时候,由于浏览器只使用单一进程来...

grootzhang
2016/04/13
0
0
特别推荐:开发者的10个最佳代码游乐场

Codepen   CodePen是一个web前后端游乐场。它基于激发、传授和分享。能高亮热门示例(“Pen”),且提供高级功能, 如共享和嵌入。需要建立一个减少测试案例来演示并找出一个bug?CodePen绝对...

不死的达芬奇
2015/01/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Apache 流框架 Flink,Spark Streaming,Storm对比分析

1.Flink架构及特性分析 Flink是个相当早的项目,开始于2008年,但只在最近才得到注意。Flink是原生的流处理系统,提供high level的API。Flink也提供 API来像Spark一样进行批处理,但两者处理...

hblt-j
11分钟前
0
0
Dubbo/HSF在Service Mesh下的思考和方案

开头 Service Mesh这个“热”词是2016年9月被“造”出来,而今年2018年更是被称为service Mesh的关键之年,各家大公司都希望能在这个思潮下领先一步。今天我也分享阿里中间件在这方面的观点,...

Mr_zebra
12分钟前
0
0
用命令卸载Win8 IE9/IE10/IE11浏览器

首先打开,开始---运行-----框里输入cmd,进入命令提示框,将下面的命令复制粘贴到命令框里,然后按下Enter键执行。 执行完命令,必须重启电脑。 卸载IE9的命令: FORFILES /P %WINDIR%\ser...

JackFace
13分钟前
0
0
2018年产品设计协作领域最强黑马居然是它?

我发了一条朋友圈“感谢池子的秘密法宝,我今天终于吃上了女朋友做的晚饭了”并配上香香的绿豆汤,瞬间获得好几十条评论。 “同为设计师,为啥你会这么早回家?” “快扶我起来,我还能画两个...

mo311
14分钟前
0
0
linux安装jdk1.8(rpm方式)

1:下载JDK的URL地址,例如:http://download.oracle.com/otn-pub/java/jdk/8u131-b11/d54c1d3a095b4ff2b6607d096fa80163/jdk-8u131-linux-x64.rpm。这个地址可以去Orcale的官网找到。通过w......

苏牧影子
19分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部