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
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
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#data {
border-collapse: collapse;
}
#data td, #data th {
width: 120px;
height: 40px;
text-align: center;
border: 1px solid black;
}
#buttons {
margin: 10px 0;
}
</style>
</head>
<body>
<table id="data">
<caption>数据统计表</caption>
<tbody>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>身高</th>
<th>体重</th>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
</tbody>
</table>
<div id="buttons">
<button id="pretty">隔行换色</button>
<button id="clear">清除数据</button>
<button id="remove">删单元格</button>
<button id="hide">隐藏表格</button>
</div>
<!-- jQuery: Write Less Do More -->
<!-- 加载本地的jQuery文件适合开发和测试时使用 -->
<script src="js/jquery.min.js"></script>
<!-- 下面的方式适合商业项目通过CDN服务器来加速获取jQuery的JS文件 -->
<!-- <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> -->
<script>
// JavaScript Object Notation == JSON
var stu = {
'id': 1001,
'name': '骆昊',
'age': 15,
'study': function(course) {
alert(this.name + '正在学习' + course);
},
'watchAv': function() {
if (this.age >= 18) {
alert(this.name + '正在观看岛国动作片');
} else {
alert(this.name + '只能观看《熊出没》');
}
}
};
stu.study('Python');
stu.watchAv();
$(function() {
$('#hide').on('click', function() {
// 根据样式表选择器获取元素 获取到的不是原生的JS对象
// 而是经过jQuery封装过后的对象（有更多的方法方便操作）
$('#data').fadeOut(2000);
});
$('#remove').on('click', function() {
$('#data tr:gt(0):last-child').remove();
});
$('#clear').on('click', function() {
$('#data tr:gt(0)>td').empty();
});
$('#pretty').on('click', function() {
$('#data tr:gt(0):odd').css({
'background-color': '#ccc',
'font-size': '36px',
'font-weight': 'bolder'
});
$('#data tr:gt(0):even').css('background-color', '#abc');
});
});
</script>
</body>
</html>
|