使用JQuery，动态增加列
这也是我在自己学做网站时无意搞出来的，希望可以对别人有所启发
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 3 <% 4 String path = request.getContextPath(); 5 String basePath = request.getScheme() + "://" 6 + request.getServerName() + ":" + request.getServerPort() 7 + path + "/"; 8 %> 9 10 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 11 <html> 12 <head> 13 <base href="<%=basePath%>"> 14 15 <title>My JSP 'table.jsp' starting page</title> 16 17 <meta http-equiv="pragma" content="no-cache"> 18 <meta http-equiv="cache-control" content="no-cache"> 19 <meta http-equiv="expires" content="0"> 20 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 21 <meta http-equiv="description" content="This is my page"> 22 <!-- 23 <link rel="stylesheet" type="text/css" href="styles.css"> 24 --> 25 <script type="text/javascript" src="js/jquery-1.10.1.js"></script> 26 <script type="text/javascript"> 27 $(document).ready( 28 function() { 29 var maxNum = 0; 30 var minNum = parseInt($(".red_one", this).eq(0).html()); 31 $(".red_one", this).each(function() { 32 var num = parseInt(this.innerHTML); 33 if (num > maxNum) { 34 maxNum = num; 35 } 36 if (num < minNum) { 37 minNum = num; 38 } 39 }); 40 var DminNum = (minNum - 1); 41 var DmaxNum = (maxNum - 1); 42 var count = (maxNum - minNum) + 1; 43 $("<td colspan=\""+count+"\">红一位分布</td>").insertAfter( 44 ".red_one_fenxi"); 45 $(".dongtai:gt(\"" + DmaxNum + "\")").remove(); 46 $(".dongtai:lt(\"" + DminNum + "\")").remove(); 47 for ( var i = 0; i < count; i++) { 48 $("<td class=\"dongtai_red_one\"></td>").insertAfter( 49 ".dongtai_fenxi"); 50 51 } 52 }); 53 </script> 54 55 <style type="text/css"> 56 body table { 57 border: 1px solid #666666; 58 text-align: center; 59 font-size: 14px; 60 } 61 62 body table tr,td { 63 border: 1px solid #666666; 64 } 65 66 .issue { 67 width: 65px; 68 } 69 70 .one { 71 width: 17px; 72 height: 17px; 73 background-color: #FF7F00 74 } 75 76 .red,.red_one,.red_one_fenxi,.dongtai_fenxi { 77 width: 17px; 78 height: 17px; 79 background-color: #D40000 80 } 81 82 .dongtai_red_one { 83 width: 17px; 84 height: 17px; 85 } 86 87 .blue { 88 width: 17px; 89 height: 17px; 90 background-color: #2A1FAA 91 } 92 93 .jiou,.weishu,.zhenfu { 94 width: 17px; 95 height: 17px; 96 background-color: #FF7F00 97 } 98 99 .shengjiang { 100 width: 17px; 101 height: 17px; 102 background-color: #2A9FFF 103 } 104 105 .yushu { 106 width: 17px; 107 height: 17px; 108 background-color: #55DFFF 109 } 110 111 .weishu_daxiao { 112 width: 17px; 113 height: 17px; 114 background-color: #FF5FFF 115 } 116 117 .weishu_fenbu { 118 width: 17px; 119 height: 17px; 120 background-color: #55DF55 121 } 122 </style> 123 </head> 124 125 <body> 126 <br> 127 <table border="0" cellspacing="0" cellpadding="0" align="center"> 128 <tr> 129 <td> 130 <table border="1" cellspacing="0" cellpadding="0"> 131 <tr> 132 <td class="issue" rowspan="2">期号</td> 133 <td class="red" colspan="6">红球</td> 134 <td rowspan="2" class="blue">蓝球</td> 135 </tr> 136 <tr> 137 <td class="red">一</td> 138 <td class="red">二</td> 139 <td class="red">三</td> 140 <td class="red">四</td> 141 <td class="red">五</td> 142 <td class="red">六</td> 143 144 </tr> 145 146 <c:if test="${not empty bonusList}"> 147 <c:forEach items="${bonusList }" var="a"> 148 <tr> 149 <td class="issue">${a.issue }</td> 150 <td class="red_one">${a.order_red_one }</td> 151 <td class="red">${a.order_red_two }</td> 152 <td class="red">${a.order_red_three }</td> 153 <td class="red">${a.order_red_four }</td> 154 <td class="red">${a.order_red_five }</td> 155 <td class="red">${a.order_red_six }</td> 156 <td class="blue">${a.blue }</td> 157 </tr> 158 </c:forEach> 159 </c:if> 160 161 </table> 162 </td> 163 <td> 164 <table border="1" cellspacing="0" cellpadding="0"> 165 <tr> 166 <td rowspan="2" bgcolor="#FF7F00" class="red_one_fenxi">一位</td> 167 <!-- 在此处加入动态的列 --> 168 <td class="jiou" colspan="2">奇偶</td> 169 <td class="shengjiang" colspan="2">升降</td> 170 <td class="yushu" colspan="3">012路</td> 171 <td class="weishu" rowspan="2">尾数</td> 172 <td class="weishu_daxiao" colspan="2">大小</td> 173 <td class="yushu" colspan="3">012路</td> 174 <td class="weishu_fenbu" colspan="10">尾数分布</td> 175 <td class="zhenfu" rowspan="2">振幅</td> 176 <td class="shengjiang" colspan="2">升降</td> 177 <td class="yushu" colspan="3">012路</td> 178 </tr> 179 <tr> 180 <td class="dongtai">01</td> 181 <td class="dongtai">02</td> 182 <td class="dongtai">03</td> 183 <td class="dongtai">04</td> 184 <td class="dongtai">05</td> 185 <td class="dongtai">06</td> 186 <td class="dongtai">07</td> 187 <td class="dongtai">08</td> 188 <td class="dongtai">09</td> 189 <td class="dongtai">10</td> 190 <td class="dongtai">11</td> 191 <td class="dongtai">12</td> 192 <td class="dongtai">13</td> 193 <td class="dongtai">14</td> 194 <td class="dongtai">15</td> 195 <td class="dongtai">16</td> 196 <td class="dongtai">17</td> 197 <td class="dongtai">18</td> 198 <td class="dongtai">19</td> 199 <td class="dongtai">20</td> 200 <td class="dongtai">21</td> 201 <td class="dongtai">22</td> 202 <td class="dongtai">23</td> 203 <td class="dongtai">24</td> 204 <td class="dongtai">25</td> 205 <td class="dongtai">26</td> 206 <td class="dongtai">27</td> 207 <td class="dongtai">28</td> 208 <td class="dongtai">29</td> 209 <td class="dongtai">30</td> 210 <td class="dongtai">31</td> 211 <td class="dongtai">32</td> 212 <td class="dongtai">33</td> 213 <td class="jiou">奇</td> 214 <td class="jiou">偶</td> 215 <td class="shengjiang">升</td> 216 <td class="shengjiang">降</td> 217 <td class="yushu">0</td> 218 <td class="yushu">1</td> 219 <td class="yushu">2</td> 220 <td class="weishu_daxiao">大</td> 221 <td class="weishu_daxiao">小</td> 222 <td class="yushu">0</td> 223 <td class="yushu">1</td> 224 <td class="yushu">2</td> 225 <td class="weishu_fenbu">0</td> 226 <td class="weishu_fenbu">1</td> 227 <td class="weishu_fenbu">2</td> 228 <td class="weishu_fenbu">3</td> 229 <td class="weishu_fenbu">4</td> 230 <td class="weishu_fenbu">5</td> 231 <td class="weishu_fenbu">6</td> 232 <td class="weishu_fenbu">7</td> 233 <td class="weishu_fenbu">8</td> 234 <td class="weishu_fenbu">9</td> 235 <td class="shengjiang">升</td> 236 <td class="shengjiang">降</td> 237 <td class="yushu">0</td> 238 <td class="yushu">1</td> 239 <td class="yushu">2</td> 240 </tr> 241 <c:if test="${not empty bonusList}"> 242 <c:forEach items="${bonusList }" var="a"> 243 <tr> 244 <td bgcolor="#FF7F00" class="dongtai_fenxi">${a.order_red_one }</td> 245 <td class="jiou"> </td> 246 <td class="jiou"> </td> 247 <td class="shengjiang"> </td> 248 <td class="shengjiang"> </td> 249 <td class="yushu"> </td> 250 <td class="yushu"> </td> 251 <td class="yushu"> </td> 252 <td class="weishu"> </td> 253 <td class="weishu_daxiao"> </td> 254 <td class="weishu_daxiao"> </td> 255 <td class="yushu"> </td> 256 <td class="yushu"> </td> 257 <td class="yushu"> </td> 258 259 <td class="weishu_fenbu"> </td> 260 <td class="weishu_fenbu"> </td> 261 <td class="weishu_fenbu"> </td> 262 <td class="weishu_fenbu"> </td> 263 <td class="weishu_fenbu"> </td> 264 <td class="weishu_fenbu"> </td> 265 <td class="weishu_fenbu"> </td> 266 <td class="weishu_fenbu"> </td> 267 <td class="weishu_fenbu"> </td> 268 <td class="weishu_fenbu"> </td> 269 <td class="zhenfu"> </td> 270 <td class="shengjiang"> </td> 271 <td class="shengjiang"> </td> 272 <td class="yushu"> </td> 273 <td class="yushu"> </td> 274 <td class="yushu"> </td> 275 </tr> 276 </c:forEach> 277 </c:if> 278 </table> 279 </td> 280 </tr> 281 </table> 282 283 <table border="1px" bordercolor="#000000" align="center" cellspacing="0px" style="border-collapse:collapse;font-size: 14px;width: 1000px;"> 284 <c:if test="${empty bonusList}"> 285 <tr bgcolor="#f0000f" align="center"> 286 <td>没有数据</td> 287 </tr> 288 </c:if> 289 </table> 290 <br> 291 </body> 292 </html>
