文档章节

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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

spring 事件

ContextRefreshedEvent Event raised when an {@code ApplicationContext} gets initialized or refreshed. ContextClosedEvent Event raised when an {@code ApplicationContext} gets clos......

Canaan_
28分钟前
1
0
leetcode两数之和

leetcode中求两数之和解决方法 给定一个整数数组和一个目标值,找出数组中和为目标值的两个数。 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用。 给定 nums = [2, 7, 11, ...

lar555
45分钟前
1
0
js实现限制网页内容复制

转载 在我们做的网页发到网上后,如果访客看到比较喜欢的内容,只要复制就可以变为自己的,自己辛辛苦苦弄半天还不及人家的一下复制,有时为了只让访客看到,而不能让它们复制内容,就用Jav...

lc_comeon
49分钟前
1
0
jenkins将spring boot项目发布到阿里云镜像中

1、spring boot项目 1.1 pom.xml配置 <artifactId>xxx-docker</artifactId><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><project.reporting.......

xixingzhe
今天
0
0
qsv格式可以在电视上播放吗

  大家都知道qsv格式是爱奇艺的独家缓存格式,是加密的,一般的播放器是无法播放的,只能在爱奇艺播放器上播放,如果想要在电视上播放,就必须要安装爱奇艺播放器,比较麻烦。其实还有一种...

萤火的萤火
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部