一、操作table，本例子实现的功能：
1.table等宽边框
2.table斑马线
3.实现table多表头
4.焦点所在行高亮
5.自动计算总分
二、效果图
三、代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <!--表格-->
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6 <meta name="description" content="html表格操作实例，table等宽边框，table斑马线，实现table多表头，焦点所在行高亮，自动计算总分">
7 <meta name="KEYWords" content="html table jquery">
8 <title>表格-斑马线</title>
9 <!--使用百度CDN-->
10 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
11 <style type="text/css">
12 table,td,th,li,h1,p,input{
13 margin:0px;
14 padding:0px;
15 }
16 p{text-align:left;margin:30px;}
17 body{
18 text-align:center;
19 }
20 table input{
21 text-align:center;
22 width:50px;
23 }
24 .cententTop{
25 width:80%;
26 height:50%;
27 margin-left:auto;
28 margin-right:auto;
29 }
30 .left img{
31 width:60%;
32 height:60%;
33 }
34 .left,.right{
35 width:60%;
36 height:30%;
37 margin-left:auto;
38 margin-right:auto;
39 border:1px solid red;
40 padding:10px;
41 }
42 table{
43 margin-left:auto;
44 margin-right:auto;
45 border-top:1px solid #99CC00;
46 border-right:1px solid #99CC00;
47 }
48 table td,th{
49 margin:5px;
50 padding:10px;
51 border-bottom:1px solid #99CC00;
52 border-left:1px solid #99CC00;
53 }
54 .even_row{
55 background-color:#FFF7C0;
56 opacity:0.6;
57 }
58 .odd_row{
59 background-color:yellow;
60 opacity:0.6;
61 }
62 p{
63 margin:10px;
64 padding:10px;
65 }
66 </style>
67 </head>
68 <body onload="loader()">
69 <div class="cententTop">
70 <div class="centent left">
71 <img src="http://www.open-open.com/bbs/uploadImg/20111012/20111012104637_158.png"></img>
72 </div>
73 <div class="centent right">
74 <table class="score" cellspacing="0">
75 <caption>成绩单</caption>
76 <thead>
77 <tr>
78 <th rowspan="2">
79 姓名
80 </th>
81 <th rowspan="2">
82 班级
83 </th>
84 <th colspan="4">
85 成绩
86 </th>
87 </tr>
88 <tr>
89 <th>
90 语文
91 </th>
92 <th>
93 数学
94 </th>
95 <th>
96 英语
97 </th>
98 <th>
99 总分
100 </th>
101 </tr>
102 </thead>
103 <tbody>
104 <tr>
105 <td>
106 张三
107 </td>
108 <td>
109 一班
110 </td>
111 <td>
112 <input type="text" value="90"/>
113 </td>
114 <td>
115 <input type="text" value="80"/>
116 </td>
117 <td>
118 <input type="text" value="96"/>
119 </td>
120 <td>
121 </td>
122 </tr>
123 <tr>
124 <td>
125 李四
126 </td>
127 <td>
128 三班
129 </td>
130 <td>
131 <input type="text" value="96"/>
132 </td>
133 <td>
134 <input type="text" value="88"/>
135 </td>
136 <td>
137 <input type="text" value="96"/>
138 </td>
139 <td>
140 </td>
141 </tr>
142 <tr>
143 <td>
144 王五
145 </td>
146 <td>
147 一班
148 </td>
149 <td>
150 <input type="text" value="85"/>
151 </td>
152 <td>
153 <input type="text" value="80"/>
154 </td>
155 <td>
156 <input type="text" value="88"/>
157 </td>
158 <td>
159 </td>
160 </tr>
161 <tr>
162 <td>
163 赵六
164 </td>
165 <td>
166 一班
167 </td>
168 <td>
169 <input type="text" value="80"/>
170 </td>
171 <td>
172 <input type="text" value="90"/>
173 </td>
174 <td>
175 <input type="text" value="88"/>
176 </td>
177 <td>
178 </td>
179 </tr>
180 </tbody>
181 </table>
182 <p>
183 <b>
184 1.table等宽边框
185 2.table斑马线
186 3.实现table多表头
187 <br/>
188 4.焦点所在行高亮
189 5.自动计算总分
190 </b>
191 </p>
192 </div>
193 </div>
194 <script>
195 function loader() {
196 setZebraLine();
197 setMouseover();
198 setTotal();
199 //console.log($("table input"));
200 };
201 //设置斑马线
202 function setZebraLine() {
203 $("tbody>tr:odd").addClass("odd_row");
204 $("tbody>tr:even").addClass("even_row");
205 };
206 //焦点所在行高亮
207 function setMouseover() {
208 $("tbody>tr").bind("mouseover", function() {
209 $(this).css("opacity", "1");
210 });
211 $("tbody>tr").bind("mouseout", function() {
212 $(this).css("opacity", "0.6");
213 });
214 };
215 //计算总分
216 function setTotal() {
217 $(".score tbody tr").each(function() {
218 var r = $(this).find("input");
219 var total = parseInt(r.eq(0).val()) + parseInt(r.eq(1).val()) + parseInt(r.eq(2).val());
220 $(this).find("td:last").text(total);
221 });
222 }
223 $(".score tbody input").bind("change", function() {
224 var r = $(this).parent().parent().find("input");
225 r = $(this).parents("tr").find("input");
226 //console.log(r);
227 var total = parseInt(r.eq(0).val()) + parseInt(r.eq(1).val()) + parseInt(r.eq(2).val());
228 $(this).parents("tr").find("td:last").text(total);
229 });
230 </script>
231 </body>
232 </html>
table操作：边框-斑马线-多表头-焦点高亮-自动求和
时间： 2024-10-08 01:05:45