js创建表格

1. 添加table   
2. <table class="tables" id="tableNorm" width="98%" border="0" cellpadding="0" cellspacing="0">   
3.   <tbody id="tabfile">   
4.                                
5.   </tbody>   
6. </table>   
7.   
8. //表格得线条太粗，该为细线条   
9. .tds{   
10.  border-bottom-color: #cccccc;   
11.  border-bottom-width:1px;   
12.  border-bottom-style:solid;   
13.  border-left-color: #cccccc;   
14.  border-left-width:1px;   
15.  border-left-style:solid;   
16.  }   
17.  .tables{   
18.  border-top-color: #cccccc;   
19.  border-top-width:1px;   
20.  border-top-style:solid;   
21.  border-right-color: #cccccc;   
22.  border-right-width:1px;   
23.  border-right-style:solid;   
24.  }   
25.   
26. 下列是js   
27. 创建js 类   
28. var all = new Array();   
29. function norm(id ,name){   
30.    this.id = id;   
31.    this. name = name;   
32. }   
33.   
34. //初始化数据   
35. function init(){   
36.  var m = new norm();   
37.  m.id = 1;   
38.  m.name = "A1";   
39.  all.push(m);   
40.   
41.  var m1= new normClass();   
42.  m1.id = 2;   
43.  m2.name = "A2";   
44.  all.push(m1);   
45.   
46.  var m2= new normClass();   
47.  m2.id = 3;   
48.  m2.name = "A3";   
49.  all.push(m2);   
50. }   
51. function setColor(obj,color){   
52.      setStyle(obj,"background-color:"+color);   
53.  }   
54. function setStyle(element,text) {      
55.      element.setAttribute("style",text)      
56.      element.style.cssText=text      
57. }   
58. function createTrTd(){   
59.   var f = 0;   
60.   var table  = document.getElementById("tabfile");   
61.   for(var   i=table.children.length;   i>0;   i--)      
62.   {      
63.       table.children[i-1].removeNode(true);      
64.   }   
65.   
66.   for(var i=0; i<all.length;i++){   
67.     if(i==0){   
68.        //定义表头   
69.         var tr = document.createElement('tr');     
70.        table.appendChild(tr);   
71.        setStyle(tr,"background-color: #308dbb");   
72.   
73.        var td1 = document.createElement('td');      
74.        tr.appendChild(td1);      
75.        td1.className="tds";   
76.        td1.align="center";   
77.        td1.height="23px;";   
78.        td1.width="70px";   
79.        var tm1 = "<font color='#ffffff' ><b>    指标编号</b> </font>";      
80.        td1.innerHTML =tm1;   
81.   
82.        var td2 = document.createElement('td');      
83.        tr.appendChild(td2);      
84.        td2.className="tds";   
85.        td2.align="center";   
86.        td2.width="180px";   
87.        var tm2 = "<font color='#ffffff' ><b>    指标名称</b> </font>";      
88.        td2.innerHTML =tm2;   
89.     }   
90.     var norm = all[i];   
91.     if(f==0){   
92.           var tr = document.createElement('tr');      
93.           tr.id = "tr"+norm.id;      
94.           table.appendChild(tr);   
95.           setStyle(tr,"background-color: #ffffff");   
96.           tr.onmousemove = function (){setColor(this,'#fdecae');};   
97.           tr.onmouseout = function (){setColor(this,'#ffffff');};   
98.   
99.           var td1 = document.createElement('td');      
100.      tr.appendChild(td1);      
101.      td1.className="tds";   
102.      td1.align="center";   
103.      td1.height="23px;";   
104.      td1.width="70px";   
105.      td1.appendChild(document.createTextNode(norm.id));   
106.   
107.      var td2 = document.createElement('td');      
108.      tr.appendChild(td2);      
109.      td2.className="tds";   
110.      td2.align="center";   
111.      td2.width="180px";   
112.      td2.appendChild(document.createTextNode(norm.name));   
113.           f = 1;   
114.     }else{   
115.           var tr = document.createElement('tr');      
116.           tr.id = "tr"+norm.id;      
117.           table.appendChild(tr);   
118.           setStyle(tr,"background-color: #ffffff");   
119.           tr.onmousemove = function (){setColor(this,'#fdecae');};   
120.           tr.onmouseout = function (){setColor(this,'#ffffff');};   
121.   
122.           var td1 = document.createElement('td');      
123.      tr.appendChild(td1);      
124.      td1.className="tds";   
125.      td1.align="center";   
126.      td1.height="23px;";   
127.      td1.width="70px";   
128.      td1.appendChild(document.createTextNode(norm.id));   
129.   
130.      var td2 = document.createElement('td');      
131.      tr.appendChild(td2);      
132.      td2.className="tds";   
133.      td2.align="center";   
134.      td2.width="180px";   
135.      td2.appendChild(document.createTextNode(norm.name));   
136.           f = 0;   
137.     }   
138.   
139.   }   
140.   
141. }   
142.   
143. function deleteNorm(normId){   
144.  //删除这项   
145.      var all = new Array();   
146.      for(var i=0; i<normList.length;i++){   
147.          var norm = normList[i];   
148.          if(norm.id == normId){   
149.          else{   
150.              all.push(normList[i]);   
151.          }   
152.      }   
153.      normList = all;   
154.      viewNormList();   
155.  }