文档章节

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
博文 99
码字总数 43341
作品 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
10 个超赞的 JavaScript 图形图表绘制插件

1、Humble Finance Humble Finance是一个与Flash工具相似的HMTL5数据可视化工具。该工具完全由JavaScript开发,使用Prototype与Flotr库 2、D3 D3是最流行的可视化库之一,它被很多其他的表格...

彭博
2012/03/13
16.3K
20
13 个最佳 JavaScript 数据表格库

JavaScript 是一种通常被用在网页开发中的编程语言。它主要是在互联网上的网页浏览器中开发出效果出众且可交互的特效。它是客户端脚本语言中的一种,是被用来作为通过用户的网页浏览器进行处...

oschina
2017/03/10
5K
7
jquery 表格的增加删除和修改及设置奇偶行颜色

最近一周在学了一点点HTML, CSS, javascript,用javascript的jquery完成了一个简单的表格操作,有增加、删除和修改功能。 表格分三列,第一列是学生编号(ID号),第二列是学生姓名,第三列为...

长平狐
2012/12/10
193
0

没有更多内容

加载失败,请刷新页面

加载更多

telegram_bot

new group -> 选择人 -> 填写群名 搜索BotFather -> start =========================== ou can control me by sending these commands: /newbot - create a new bot /mybots - edit your bo......

八戒八戒八戒
7分钟前
0
0
Spring boot中使用Jackson ObjectMapper注入

问题 本身spring boot已经集成了Jackson的库,我想自己在Controller中直接使用Spring默认的ObjectMapper,应该怎么做? RestController.java public class RestController { private fi...

亚林瓜子
13分钟前
0
0
老男孩 - python函数编程day2

mark

以谁为师
27分钟前
1
0
【58沈剑 架构师之路】缓存,究竟是淘汰,还是修改?

允许cache miss的场景,不管是memcache还是redis,当被缓存的内容变化时,是修改缓存,还是淘汰缓存?这是今天将要讨论的话题。 问:KV缓存都缓存了一些什么数据? 答: (1)朴素类型的数据...

张锦飞
29分钟前
1
0
Spring异常之Druid – unregister mbean error set JAVA_OPTS="-Ddruid.registerToSysProperty=true"

Spring异常之Druid – unregister mbean error 2017年04月19日 12:13:42 Dr.Zhu 阅读数:6688 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zt_fucker/arti...

linjin200
30分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部