1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>示例-邮件列表</title>
6 <!--<link rel="stylesheet" type="text/css" href="css.css"/>-->
7 <style type="text/css">
8 table{
9 border:#249bdb 1px solid;
10 width:500px;
11 border-collapse:collapse;
12 }
13 table td{
14 border:#249bdb 1px solid;
15 padding:10px;
16 }
17
18 table th{
19 border:#249bdb 1px solid;
20 padding:10px;
21 background-color:rgb(200,200,200);
22 }
23 .one{
24 background-color:#9bf7d5;
25 }
26 .two{
27 background-color:#f3e99a;
28 }
29 .over{
30 background-color:#ef7125;
31 }
32 </style>
33 </head>
34
35 <body>
36 <script type="text/javascript">
37 //行颜色间隔显示功能
38 function trColor(){
39
40 var name;
41 //1、获取表格对象
42 var oTabNode = document.getElementById("mailtable");
43
44
45 //2、获取行对象。
46 var collTrNodes = oTabNode.rows;
47
48 //3、对所有需要设置背景的行对象进行遍历。
49 for(var x=1;x<collTrNodes.length-1;x++){
50
51 if(x%2==1){
52 collTrNodes[x].className = "one";
53 }
54 else{
55 collTrNodes[x].className="two";
56 }
57
58 collTrNodes[x].onmouseover = function(){
59 name = this.className;
60 this.className="over";
61 }
62 collTrNodes[x].onmouseout = function(){
63
64 this.className=name;
65 }
66 }
67 }
68
69 onload = function(){
70
71 trColor();
72 }
73
74 //复选框的全选动作
75 function checkAll(node){
76
77 //获取所有的mail复选框
78 var collMailNodes = document.getElementsByName("mail");
79
80 for(var x=0;x<collMailNodes.length;x++){
81 collMailNodes[x].checked = node.checked;
82 }
83 }
84
85 //定义操作复选框按钮的方法
86 function checkAllByBut(num){
87 var collMailNodes = document.getElementsByName("mail");
88
89 for(var x=0;x<collMailNodes.length;x++){
90 if(num>1)
91 collMailNodes[x].checked = !collMailNodes[x].checked;
92 else
93 collMailNodes[x].checked = num;
94
95 }
96 }
97
98 //删除所选邮件
99 function deleteMail(){
100
101 if(confirm("你真的要删除所选的邮件吗？")){
102
103 var collMailNodes = document.getElementsByName("mail");
104
105 for(var x=0;x<collMailNodes.length;x++){
106 if(collMailNodes[x].checked){
107 var oTrNode = collMailNodes[x].parentNode.parentNode;
108 oTrNode.parentNode.removeChild(oTrNode);
109 x--;
110 }
111 }
112 }
113 }
114 </script>
115 <table id="mailtable">
116 <tr>
117 <th>
118 <input type="checkbox" name="all" onclick="checkAll(this)" />全选
119 </th>
120 <th>
121 发件人
122 </th>
123 <th>
124 邮件名称
125 </th>
126 <th>
127 邮件附属信息
128 </th>
129 </tr>
130
131 <tr>
132 <td>
133 <input type="checkbox" name="mail" />
134 </td>
135 <td>
136 张三11
137 </td>
138 <td>
139 我是邮件11
140 </td>
141 <td>
142 我是附属信息11
143 </td>
144 </tr>
145 <tr>
146 <td>
147 <input type="checkbox" name="mail" />
148 </td>
149 <td>
150 张三22
151 </td>
152 <td>
153 我是邮件22
154 </td>
155 <td>
156 我是附属信息22
157 </td>
158 </tr>
159 <tr>
160 <td>
161 <input type="checkbox" name="mail" />
162 </td>
163 <td>
164 张三33
165 </td>
166 <td>
167 我是邮件33
168 </td>
169 <td>
170 我是附属信息33
171 </td>
172 </tr>
173 <tr>
174 <td>
175 <input type="checkbox" name="mail" />
176 </td>
177 <td>
178 张三44
179 </td>
180 <td>
181 我是邮件44
182 </td>
183 <td>
184 我是附属信息44
185 </td>
186 </tr>
187 <tr>
188 <td>
189 <input type="checkbox" name="mail" />
190 </td>
191 <td>
192 张三55
193 </td>
194 <td>
195 我是邮件55
196 </td>
197 <td>
198 我是附属信息55
199 </td>
200 </tr>
201 <tr>
202 <td>
203 <input type="checkbox" name="mail" />
204 </td>
205 <td>
206 张三66
207 </td>
208 <td>
209 我是邮件66
210 </td>
211 <td>
212 我是附属信息66
213 </td>
214 </tr>
215 <tr>
216 <td>
217 <input type="checkbox" name="mail" />
218 </td>
219 <td>
220 张三117
221 </td>
222 <td>
223 我是邮件117
224 </td>
225 <td>
226 我是附属信息17
227 </td>
228 </tr>
229 <tr>
230 <td>
231 <input type="checkbox" name="mail" />
232 </td>
233 <td>
234 张三118
235 </td>
236 <td>
237 我是邮件118
238 </td>
239 <td>
240 我是附属信息118
241 </td>
242 </tr>
243 <tr>
244 <td>
245 <input type="checkbox" name="mail" />
246 </td>
247 <td>
248 张三119
249 </td>
250 <td>
251 我是邮件119
252 </td>
253 <td>
254 我是附属信息119
255 </td>
256 </tr>
257 <tr>
258 <td>
259 <input type="checkbox" name="mail" />
260 </td>
261 <td>
262 张三1100
263 </td>
264 <td>
265 我是邮件110
266 </td>
267 <td>
268 我是附属信息110
269 </td>
270 </tr>
271 <tr>
272 <td>
273 <input type="checkbox" name="mail" />
274 </td>
275 <td>
276 张三11a
277 </td>
278 <td>
279 我是邮件11a
280 </td>
281 <td>
282 我是附属信息11a
283 </td>
284 </tr>
285 <tr>
286 <td>
287 <input type="checkbox" name="mail" />
288 </td>
289 <td>
290 张三11b
291 </td>
292 <td>
293 我是邮件11b
294 </td>
295 <td>
296 我是附属信息1b1
297 </td>
298 </tr>
299 <tr>
300 <td>
301 <input type="checkbox" name="mail" />
302 </td>
303 <td>
304 张三11c
305 </td>
306 <td>
307 我是邮件11c
308 </td>
309 <td>
310 我是附属信息11c
311 </td>
312 </tr>
313 <tr>
314 <td>
315 <input type="checkbox" name="mail" />
316 </td>
317 <td>
318 张三11d
319 </td>
320 <td>
321 我是邮件11d
322 </td>
323 <td>
324 我是附属信息11d
325 </td>
326 </tr>
327 <tr>
328 <td>
329 <input type="checkbox" name="mail" />
330 </td>
331 <td>
332 张三11e
333 </td>
334 <td>
335 我是邮件11e
336 </td>
337 <td>
338 我是附属信息11e
339 </td>
340 </tr>
341 <tr>
342 <th>
343 <input type="checkbox" name="all" onclick="checkAll(this)" />全选
344 </th>
345 <th colspan="3">
346 <input type="button" value="全选" onclick="checkAllByBut(1)" />
347 <input type="button" value="取消全选" onclick="checkAllByBut(0)" />
348 <input type="button" value="反选" onclick="checkAllByBut(2)" />
349 <input type="button" value="删除所选附件" onclick="deleteMail()" />
350 </th>
351 </tr>
352 </table>
353 </body>
354 </html>
浙公网安备 33010602011771号