Chinaunix首页 | 论坛 | 博客
  • 博客访问: 326654
  • 博文数量: 206
  • 博客积分: 1040
  • 博客等级: 少尉
  • 技术积分: 1756
  • 用 户 组: 普通用户
  • 注册时间: 2012-04-09 17:22
文章分类

全部博文(206)

文章存档

2015年(3)

2014年(147)

2013年(2)

2012年(54)

我的朋友

分类: 系统运维

2014-02-26 10:41:24

原文地址:JavaScript 动态创建table 作者:huaius

传统的表格生成方式是通过文本方式写到页面的body,还有一种方式是可以通过JavaScript动态的生成。后者有一些优点:
    1. 交互性。在和用户的交互中收集数据来生成表格,这个是传统方式所不能完成的。
    2. 灵活性。通过JavaScript生成的表格是面向对象的,可以非常容易的实现表格属性的修改。比如把特定的某些行或者列的背景变色,只需通过其对象调用改变即可,下面的例子会有体现。如果通过传统的方式的话,就需要进行令人头大的字符串拼接了。

下面的例子实现对一个规则的哈希结构进行动态的表格转化。

  1. <html xmlns="">
  2. <head>
  3. <title>Summary</title>

  4. <script type="text/javascript">
  5. function create_table() {
  6.     var summary = [
  7.       {
  8.         "name":"zhang san",
  9.         "age":24
  10.       },
  11.       {
  12.         "name":"li si",
  13.         "age":42
  14.       },
  15.       {
  16.         "name":"wang wu",
  17.         "age":34
  18.       }
  19.     ];
  20.     var mytable = document.createElement("table");
  21.     var mytablebody = document.createElement("tbody");
  22.     var mycurrent_row,key;
  23.     //create the table header
  24.     var item = summary[0];
  25.     mycurrent_row = document.createElement("tr");
  26.     for (key in item) {
  27.         mycurrent_cell = document.createElement("td");
  28.         currenttext = document.createTextNode(key);
  29.         mycurrent_cell.appendChild(currenttext);
  30.         mycurrent_row.appendChild(mycurrent_cell);
  31.     }
  32.     mytablebody.appendChild(mycurrent_row);
  33.     
  34.     for(var x=0;x<summary.length;x++){
  35.         item = summary[x];
  36.         mycurrent_row = document.createElement("tr");
  37.         for (key in item) {
  38.             mycurrent_cell = document.createElement("td");
  39.             currenttext = document.createTextNode(item[key]);;
  40.             mycurrent_cell.appendChild(currenttext);
  41.             mycurrent_row.appendChild(mycurrent_cell);
  42.         }
  43.         if(x % 2 == 0) mycurrent_row.style.backgroundColor = "yellow";
  44.         mytablebody.appendChild(mycurrent_row);
  45.     }
  46.     
  47.     
  48.     mytable.appendChild(mytablebody);
  49.     mytable.setAttribute("border", "2");
  50.     return mytable;
  51. }
  52. window.onload = function(){
  53.     var table=create_table();
  54.     document.body.appendChild(table);
  55. }

  56. </script>

  57. </head>
  58.     <body>
  59.     </body>
  60. </html>




阅读(738) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~