释放双眼，带上耳机，听听看~！
一：用最底层的方式，该方式用来创建别的对象树也可以
代码演示：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
2 <head>
3 <title>DHTML技术演示---表格创建--用最底层的方式，其实该方式用来创建别的对象树也可以</title>
4 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
5 <style type="text/css">
6 table{
7 border:#ff80ff;
8 width:500px;
9 border-collapse:collapse;
10 }
11 table td{
12 border:#0000ff 1px solid;
13 padding:5px;/*内补丁*/
14 }
15 </style>
16 <script type="text/javascript">
17 function createTable(){
18 //思路: 把表格子树中的每个节点对象创建出来，然后把这些对象组装成一棵树。最后再把这棵树挂到div对象下面
19 //1通过document.createElement()创建每个标签对象
20 var oTableNode = document.createElement("table");
21 var oTbdNode = document.createElement("tbody");
22 var oTrNode = document.createElement("tr");
23 var oTdNode = document.createElement("td");
24 oTdNode.innerHTML="单元格中的内容";
25 //2把以上节点组装成一棵树
26 oTrNode.appendChild(oTdNode);
27 oTbdNode.appendChild(oTrNode);
28 oTableNode.appendChild(oTbdNode);
29
30 //3把这棵子树加到div对象下面
31 document.getElementsByTagName("div")[0].appendChild(oTableNode);
32 }
33
34 </script>
35
36
37 </head>
38
39 <body>
40 <input type="button" value="创建表格" onclick="createTable()" />
41 <hr/>
42 <div></div>
43
44 </body>
45</html>
46
47
360浏览器8.1 演示结果：
点击按钮：就创建一个表格：
二、表格创建–用table对象和tr对象中现有的方法来操纵表格
代码演示：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
2 <head>
3 <title>DHTML技术演示---表格创建--用table对象和tr对象中现有的方法来操纵表格</title>
4 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
5 <style type="text/css">
6 table {
7 border:#ff80ff;
8 width:800px;
9 border-collapse:collapse;
10 /*separate : 默认值。边框独立（标准HTML）
11 collapse : 相邻边被合并
12 */
13 }
14 table td{
15 border:#0000ff 1px solid;
16 padding:5px;
17 }
18 </style>
19 <script type="text/javascript">
20 function createTable(){
21 var oTableNode = document.createElement("table");
22 var oTrNode = oTableNode.insertRow();//往表格对象中插入一个tr对象(空行),并返回该tr对象
23 var oTdNode = oTrNode.insertCell();//往tr对象中插入一个Cell即td对象
24 oTdNode.innerHTML="单元格中的内容";
25 document.getElementsByTagName("div")[0].appendChild(oTableNode);
26 }
27
28 function createTable2(){
29 var oTableNode = document.createElement("table");//创建表格对象
30
31 //多行多列的表格,如5*6
32 for(var x=1;x<=5;x++){
33
34 var oTrNode = oTableNode.insertRow();//往表格对象中插入一个tr对象(空行),并返回该tr对象
35 for(var y=1;y<=6;y++){
36 var oTdNode = oTrNode.insertCell();//往tr对象中插入一个Cell即td对象
37 oTdNode.innerHTML="单元格"+x+"-"+y+"中的内容";
38 }
39 }
40 document.getElementsByTagName("div")[0].appendChild(oTableNode);
41 }
42
43 //用户自定义行号与列号的方式创建表格
44 function createTable3(){
45 var oTableNode = document.createElement("table");//创建表格对象
46 //给表格动态地添加属性(id)
47 //法1
48 //oTableNode.id = "tableId";//变量方式
49 //法2
50 oTableNode.setAttribute("id","tableId");//函数方式
51
52 //由用户指定行数和列数的表格
53 //获取用户输入飞行数和列数
54 var rowNum =parseInt(document.getElementsByName("rowNum")[0].value);
55 var colNum =parseInt(document.getElementsByName("colNum")[0].value);
56
57 //健壮性防护
58 if(isNaN(rowNum) || isNaN(colNum) || rowNum<=0 || colNum<=0 ){
59 alert("行号和列号必须是大于0的整数");
60 return;
61 }
62
63 for(var x=1; x<=rowNum;x++){
64 //往表格对象中插入一个tr对象（空行），并返回该tr对象
65 var oTrNode =oTableNode.insertRow();
66 for(var y=1;y<=colNum;y++){
67 //往tr对象中插入一个Cell即td对象
68 var oTdNode = oTrNode.insertCell();
69 oTdNode.innerHTML="单元格"+x+"-"+y+"中的内容";
70 }
71 }
72 document.getElementsByTagName("div")[0].appendChild(oTableNode);
73 }
74
75
76 //删除指定行
77 function delRow(){
78 //由指定的id来获取该表格
79 var oTableNode = document.getElementById("tableId");
80 //alert(oTableNode.nodeName);//TABLE
81 //alert(oTableNode);
82 //防护
83 if(oTableNode==null){
84 alert("表格不存在");
85 return;
86 }
87
88 //删除行的处理代码
89 //获取用户输入的行号
90 var delRowNum = parseInt(document.getElementsByName("delRowNum")[0].value);
91
92 //alert(delRowNum);
93 //行号的健壮性防护
94 if(isNaN(delRowNum) ){
95 alert("行号必须是数字");
96 return;
97 }
98 if(!(delRowNum>0 && delRowNum<=oTableNode.rows.length)){
99 alert("该行不存在!");
100 return;
101 }
102 //删除行
103 oTableNode.deleteRow(delRowNum-1);
104 }
105
106 //删除指定的列
107 function delCol(){
108 //由指定id来获取该表格
109 var oTableNode = document.getElementById("tableId");
110 //alert(oTableNode.nodeName);
111 //alert(oTableNode);
112 //防护
113 if(oTableNode==null){
114 alert("表格不存在!");
115 return;
116 }
117 //删除列的处理代码
118 //获取用户输入的列号
119 var delColNum = parseInt(document.getElementsByName("delColNum")[0].value);
120
121 //alert(delColNum);
122 //行号的健壮性防护
123 if(isNaN(delColNum)){
124 alert("列号必须是数字");
125 return ;
126 }
127
128 if(!(delColNum>0 && delColNum<=oTableNode.rows[0].cells.length)){
129 alert("该列不存在!");
130 return;
131 }
132 //删除列:※※表格中没有现成的删除列的函数，因此只能自己遍历行，然后通过tr对象中的deleteCell来实现
133 for(var x=0;x<oTableNode.rows.length;x++){
134 oTableNode.rows[x].deleteCell( delColNum-1 );
135 }
136 }
137
138 </script>
139
140
141 </head>
142
143 <body>
144 <input type="button" value="创建表格" onclick="createTable()" />
145 <input type="button" value="创建多行多列表格" onclick="createTable2()" />
146 <br/><br/><br/>
147 <!--添加-->
148 行数:<input type="text" name="rowNum" />
149 列数:<input type="text" name="colNum" />
150 <input type="button" value="创建表格" onclick="createTable3()" />
151 <br/><br/><br/>
152
153 <!--删除-->
154 <h3>删除前面由用户指定行列号方式创建的表格</h3>
155 行号:<input type="text" name="delRowNum"/>
156 <input type="button" value="删除行" onclick="delRow()" />
157 列号:<input type="text" name="delColNum"/>
158 <input type="button" value="删除列" onclick="delCol()" />
159
160 <hr/>
161
162 <div></div>
163 </body>
164</html>
165
166
360浏览器8.1 演示结果：
创建一个9行9列的表格，然后删除了第二行和第二列
三、表格中页面中的显示操纵–行间隔高亮显示
代码演示：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
2 <head>
3 <title>DHTML技术演示---表格中页面中的显示操纵--行间隔高亮显示</title>
4 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
5 <style type="text/css">
6 @import url(table.css);
7 .one{
8 background:#00ff00;
9 }
10 .two{
11 background:rgb(210,0,0);
12 }
13 </style>
14 <script type="text/javascript">
15 function trColor(){
16 var oTableNode = document.getElementById("dataTable");
17 var arrTrs = oTableNode.rows;//rows为表格属性，返回所以的行
18 for(var x=1;x<arrTrs.length; x++){
19 if(x%2==1){
20 arrTrs[x].className="one";
21 }else{
22 arrTrs[x].className="two";
23 }
24 }
25 }
26 //onload = trColor();//这种方式赋值就是执行(本例中，这一句没有效果，因为table对象还没出来。
27 //但如果把该段代码放在<table>之后则有效果)，而且只能执行这一个方法
28
29 onload=function(){
30 trColor();
31 //还可以在这里写其它代码，甚至调用其它函数
32 };
33 //这种方式只是给onload事件注册响应函数，解析该句代码时函数并没有执行
34 //而是在该事件发生时才会调用。并且可以在function()中调用多个函数.
35
36 </script>
37
38
39 </head>
40
41 <body>
42 <table id="dataTable">
43 <tr>
44 <th>姓名</th> <th>年龄</th> <th>地址</th>
45 </tr>
46
47 <tr>
48 <td>张三</td> <td>23</td> <td>湖南长沙</td>
49 </tr>
50 <tr>
51 <td>李四</td> <td>23</td> <td>湖南长沙</td>
52 </tr>
53 <tr>
54 <td>王五</td> <td>23</td> <td>湖南长沙</td>
55 </tr>
56 <tr>
57 <td>Jack</td> <td>23</td> <td>湖南长沙</td>
58 </tr>
59 <tr>
60 <td>Rose</td> <td>23</td> <td>湖南长沙</td>
61 </tr>
62 <tr>
63 <td>Jack</td> <td>23</td> <td>湖南长沙</td>
64 </tr>
65 <tr>
66 <td>Rose</td> <td>23</td> <td>湖南长沙</td>
67 </tr>
68 <tr>
69 <td>Jack</td> <td>23</td> <td>湖南长沙</td>
70 </tr>
71 <tr>
72 <td>Rose</td> <td>23</td> <td>湖南长沙</td>
73 </tr>
74 </table>
75
76 </body>
77</html>
78
79
table.css:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2 border:#ff80ff 1px solid;
3 /*solid : 实线边框 */
4 width:800px;
5 border-collapse:collapse;
6 /*separate : 默认值。边框独立（标准HTML）
7 collapse : 相邻边被合并
8 */
9}
10table td{/*table 下面的td*/
11 border:#0000ff 1px solid;
12 padding:5px;/*内补丁*/
13}
14table th{
15 border:#ff80ff 1px solid;
16 padding:5px;
17 background-color:#c0c0c0;
18}
19
