首页 > 代码库 > table操作：边框-斑马线-多表头-焦点高亮-自动求和
table操作：边框-斑马线-多表头-焦点高亮-自动求和
一、操作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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。