`

JS动态创建表格(转)

javascripthtml 
阅读更多
目标：生成一个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(createTable2);
  /* 
   showFunctionRunTime(createTable);
   showFunctionRunTime(createTable3);
   showFunctionRunTime(createTable4);*/
  </script>
 </body>
</html>

参考：
http://www.cnblogs.com/huhaoaixl/archive/2009/03/17/1414752.html
分享到：
| hibernate一对多自身关联
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript动态创建表格

    JavaScript 动态创建表格知识点总结 JavaScript 动态创建表格是指使用 JavaScript 语言来动态地创建和修改 HTML 表格的行和单元格。这种技术非常有用，特别是在需要频繁地更新表格数据的情况下。 动态创建表格的两...

    js动态创建表格

    js动态创建表格，利用dom技术动态输入行列来创建表格

    javascript下动态创建表格的三种方式

    ### JavaScript 下动态创建表格的三种方式 在网页开发过程中，经常需要通过JavaScript来动态地创建或更新HTML元素，其中就包括表格（`&lt;table&gt;`）。本文将详细介绍在JavaScript中动态创建表格的三种常见方法，并对每...

    JS DOM动态创建表格 行 列

    JS DOM动态创建表格 行 列

    qml动态创建表格

    自已写的一个动态创建表格的qml程序，通过js来控制逻辑，还是很有用

    Javascript动态创建表格

    Javascript动态创建表格 兼容google浏览器、360，ie等浏览器，很实用

    使用JavaScript和DOM动态创建表格

    使用JavaScript和DOM动态创建表格

    老裴帮助关于Javascript动态创建表格的小练习

    标题中的“老裴帮助关于Javascript动态创建表格的小练习”指的是一个使用JavaScript编程语言来动态创建HTML表格的学习资源或教程。JavaScript是一种广泛应用于客户端Web开发的脚本语言，它允许开发者在用户与网页...

    动态创建表格

    javaScript动态创建表格

    jQuery动态创建表格生成器代码.zip

    《jQuery动态创建表格生成器代码详解》 在Web开发中，动态生成表格是常见的需求，尤其是在数据展示和交互性较强的应用场景中。jQuery作为一个轻量级的JavaScript库，以其简洁的API和强大的功能深受开发者喜爱。本文...

    js读取json数据动态生成列数不固定的表格

    我们可以利用`document.createElement()`、`.appendChild()`等方法动态创建这些元素。 4. **数据驱动视图**：根据JSON数据的结构，我们需要遍历数据，为每一项生成对应的表格行。如果列数不固定，我们需要在开始...

    js动态操作表格

    以上就是JavaScript动态操作表格的基本方法。实际应用中，可能还需要考虑到事件监听、异步数据加载等情况。通过熟练掌握这些技巧，你可以创建出交互性强、功能丰富的表格应用。记住，实践是检验理论的最好方式，尝试...

    javascript动态创建表格.doc

    在JavaScript中动态创建表格是一项常见的任务，特别是在网页交互和数据展示中。本文将深入探讨如何利用JavaScript的`insertRow()`和`insertCell()`方法来添加行和单元格，以及如何使用`deleteRow()`和`deleteCell()`...

    动态创建删除表格

    要动态创建表格，我们可以使用jQuery的`append()`方法在页面上指定的元素后添加新的HTML代码。 1. **创建整个表格**： 假设我们有一个空的`div`元素用于放置表格，其ID为`tableContainer`。可以这样创建一个2行3列...

    javascript_动态创建表格

    总结来说，使用JavaScript动态创建和管理表格是一种非常实用且强大的功能，可以帮助开发者根据用户的需求实时调整表格结构。通过上述方法的介绍，你可以更灵活地控制表格的显示效果，提高用户体验。

    javascript 动态创建表格：新增、删除行和单元格.zip

    总结来说，这个压缩包提供的知识涵盖了JavaScript动态创建和操作HTML表格的基本技巧，对于想要提升网页交互性的开发者尤其有用。通过学习和实践这些方法，你可以创建出更具活力和用户友好的网页应用。

    动态创建表格标签

    在IT领域，动态创建表格标签是一项常见的编程任务，特别是在网页开发和用户界面设计中。这一技术使得开发者能够根据需要在运行时自动生成表格元素，如`&lt;table&gt;`、`&lt;tr&gt;`（表格行）、`&lt;td&gt;`（表格数据单元格）以及与...

    js生成动态表格并为每个单元格添加单击事件的方法

    本文所探讨的方法主要涉及使用JavaScript动态创建表格，并为表格中的每一个单元格添加点击事件处理函数，实现点击单元格时能够弹出单元格内容并改变单元格背景颜色的效果。下面详细地对标题、描述和给出的部分内容...

    js动态生成表格

    1. 创建表格结构： - 使用`document.createElement()`方法创建新的HTML元素。例如，`var table = document.createElement('table')`创建一个表格。 - 对于表格的行和列，同样可以使用此方法，如`var tr = document...

    javascript动态操作表格

    总的来说，JavaScript动态操作表格涉及创建、删除、选择和更新表格元素，这些都需要对DOM有深入理解。在实际应用中，还要考虑浏览器兼容性，特别是对于较旧的浏览器，如IE6和早期的Firefox版本。通过合理使用...

Magicbox
Global site tag (gtag.js) - Google Analytics