ht_js_table

一张图解释table主要元素关系
able
tr：表格一行
th：表格
tbody：表格单元内容集合
td：表格单元内容
操作表单样式有2种方式，css或者html内添加
个人觉得html内添加不够方便，被限制的地方比较多，还是css好
注意边框融合：
css：border-collapse：collapse；
html：ceilspacing=”0”
attention:html中，border=’1’,等价于border=”1px”,solid red不起作用。

html创建table + js动态添加tr

1
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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table</title>
	<style>
		#table1{
			width : 400px;
			text-align: center;
			border-collapse: collapse;
		}
		#table1 th, #table1 td{
			border: 1px solid red;
		}
	</style>
</head>
<style>
</style>
<body>
	<table id="table1">
		<caption>test table 1</caption>
		<tr>
			<th>姓名</th>
			<th>学号</th>
			<th>成绩</th>
		</tr>
		<tbody id="mybody">
			<tr>
				<td>张三</td>
				<td>1</td>
				<td>100</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>2</td>
				<td>90</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>3</td>
				<td>80</td>
			</tr>
		</tbody>
	</table>

	<table id="table2" width="300" border="1px" cellspacing="0">
		<caption>test table 2</caption>
		<tr>
			<th>姓名</th>
			<th>学号</th>
			<th>成绩</th>
		</tr>
		<tbody>
			<tr>
				<td>张三</td>
				<td>1</td>
				<td>100</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>2</td>
				<td>90</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>3</td>
				<td>80</td>
			</tr>
		</tbody>
	</table>
</body>
<script>
	//js动态添加table内容
	var _tbody = document.getElementById('mybody');
	var _tr = document.createElement('tr');
	var array = ['tom', 4, 70];
	var td_array = [];
	for(var i = 0; i < 3;i++){
		var _td = document.createElement('td');
		var node = document.createTextNode(array[i]);
		_td.appendChild(node);
		_tr.appendChild(_td);
	}
	_tbody.appendChild(_tr);
</script>
</html>