这也是我在自己学做网站时无意搞出来的，希望可以对别人有所启发
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'table.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
var maxNum = 0;
var minNum = parseInt($(".red_one", this).eq(0).html());
$(".red_one", this).each(function() {
var num = parseInt(this.innerHTML);
if (num > maxNum) {
maxNum = num;
}
if (num < minNum) {
minNum = num;
}
});
var DminNum = (minNum - 1);
var DmaxNum = (maxNum - 1);
var count = (maxNum - minNum) + 1;
$("<td colspan=\""+count+"\">红一位分布</td>").insertAfter(
".red_one_fenxi");
$(".dongtai:gt(\"" + DmaxNum + "\")").remove();
$(".dongtai:lt(\"" + DminNum + "\")").remove();
for ( var i = 0; i < count; i++) {
$("<td class=\"dongtai_red_one\"></td>").insertAfter(
".dongtai_fenxi"); }
});
</script> <style type="text/css">
body table {
border: 1px solid #666666;
text-align: center;
font-size: 14px;
} body table tr,td {
border: 1px solid #666666;
} .issue {
width: 65px;
} .one {
width: 17px;
height: 17px;
background-color: #FF7F00
} .red,.red_one,.red_one_fenxi,.dongtai_fenxi {
width: 17px;
height: 17px;
background-color: #D40000
} .dongtai_red_one {
width: 17px;
height: 17px;
} .blue {
width: 17px;
height: 17px;
background-color: #2A1FAA
} .jiou,.weishu,.zhenfu {
width: 17px;
height: 17px;
background-color: #FF7F00
} .shengjiang {
width: 17px;
height: 17px;
background-color: #2A9FFF
} .yushu {
width: 17px;
height: 17px;
background-color: #55DFFF
} .weishu_daxiao {
width: 17px;
height: 17px;
background-color: #FF5FFF
} .weishu_fenbu {
width: 17px;
height: 17px;
background-color: #55DF55
}
</style>
</head> <body>
<br>
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td class="issue" rowspan="2">期号</td>
<td class="red" colspan="6">红球</td>
<td rowspan="2" class="blue">蓝球</td>
</tr>
<tr>
<td class="red">一</td>
<td class="red">二</td>
<td class="red">三</td>
<td class="red">四</td>
<td class="red">五</td>
<td class="red">六</td> </tr> <c:if test="${not empty bonusList}">
<c:forEach items="${bonusList }" var="a">
<tr>
<td class="issue">${a.issue }</td>
<td class="red_one">${a.order_red_one }</td>
<td class="red">${a.order_red_two }</td>
<td class="red">${a.order_red_three }</td>
<td class="red">${a.order_red_four }</td>
<td class="red">${a.order_red_five }</td>
<td class="red">${a.order_red_six }</td>
<td class="blue">${a.blue }</td>
</tr>
</c:forEach>
</c:if> </table>
</td>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2" bgcolor="#FF7F00" class="red_one_fenxi">一位</td>
<!-- 在此处加入动态的列 -->
<td class="jiou" colspan="2">奇偶</td>
<td class="shengjiang" colspan="2">升降</td>
<td class="yushu" colspan="3">012路</td>
<td class="weishu" rowspan="2">尾数</td>
<td class="weishu_daxiao" colspan="2">大小</td>
<td class="yushu" colspan="3">012路</td>
<td class="weishu_fenbu" colspan="10">尾数分布</td>
<td class="zhenfu" rowspan="2">振幅</td>
<td class="shengjiang" colspan="2">升降</td>
<td class="yushu" colspan="3">012路</td>
</tr>
<tr>
<td class="dongtai">01</td>
<td class="dongtai">02</td>
<td class="dongtai">03</td>
<td class="dongtai">04</td>
<td class="dongtai">05</td>
<td class="dongtai">06</td>
<td class="dongtai">07</td>
<td class="dongtai">08</td>
<td class="dongtai">09</td>
<td class="dongtai">10</td>
<td class="dongtai">11</td>
<td class="dongtai">12</td>
<td class="dongtai">13</td>
<td class="dongtai">14</td>
<td class="dongtai">15</td>
<td class="dongtai">16</td>
<td class="dongtai">17</td>
<td class="dongtai">18</td>
<td class="dongtai">19</td>
<td class="dongtai">20</td>
<td class="dongtai">21</td>
<td class="dongtai">22</td>
<td class="dongtai">23</td>
<td class="dongtai">24</td>
<td class="dongtai">25</td>
<td class="dongtai">26</td>
<td class="dongtai">27</td>
<td class="dongtai">28</td>
<td class="dongtai">29</td>
<td class="dongtai">30</td>
<td class="dongtai">31</td>
<td class="dongtai">32</td>
<td class="dongtai">33</td>
<td class="jiou">奇</td>
<td class="jiou">偶</td>
<td class="shengjiang">升</td>
<td class="shengjiang">降</td>
<td class="yushu">0</td>
<td class="yushu">1</td>
<td class="yushu">2</td>
<td class="weishu_daxiao">大</td>
<td class="weishu_daxiao">小</td>
<td class="yushu">0</td>
<td class="yushu">1</td>
<td class="yushu">2</td>
<td class="weishu_fenbu">0</td>
<td class="weishu_fenbu">1</td>
<td class="weishu_fenbu">2</td>
<td class="weishu_fenbu">3</td>
<td class="weishu_fenbu">4</td>
<td class="weishu_fenbu">5</td>
<td class="weishu_fenbu">6</td>
<td class="weishu_fenbu">7</td>
<td class="weishu_fenbu">8</td>
<td class="weishu_fenbu">9</td>
<td class="shengjiang">升</td>
<td class="shengjiang">降</td>
<td class="yushu">0</td>
<td class="yushu">1</td>
<td class="yushu">2</td>
</tr>
<c:if test="${not empty bonusList}">
<c:forEach items="${bonusList }" var="a">
<tr>
<td bgcolor="#FF7F00" class="dongtai_fenxi">${a.order_red_one }</td>
<td class="jiou"> </td>
<td class="jiou"> </td>
<td class="shengjiang"> </td>
<td class="shengjiang"> </td>
<td class="yushu"> </td>
<td class="yushu"> </td>
<td class="yushu"> </td>
<td class="weishu"> </td>
<td class="weishu_daxiao"> </td>
<td class="weishu_daxiao"> </td>
<td class="yushu"> </td>
<td class="yushu"> </td>
<td class="yushu"> </td> <td class="weishu_fenbu"> </td>
<td class="weishu_fenbu"> </td>
<td class="weishu_fenbu"> </td>
<td class="weishu_fenbu"> </td>
<td class="weishu_fenbu"> </td>
<td class="weishu_fenbu"> </td>
<td class="weishu_fenbu"> </td>
<td class="weishu_fenbu"> </td>
<td class="weishu_fenbu"> </td>
<td class="weishu_fenbu"> </td>
<td class="zhenfu"> </td>
<td class="shengjiang"> </td>
<td class="shengjiang"> </td>
<td class="yushu"> </td>
<td class="yushu"> </td>
<td class="yushu"> </td>
</tr>
</c:forEach>
</c:if>
</table>
</td>
</tr>
</table> <table border="1px" bordercolor="#000000" align="center" cellspacing="0px" style="border-collapse:collapse;font-size: 14px;width: 1000px;">
<c:if test="${empty bonusList}">
<tr bgcolor="#f0000f" align="center">
<td>没有数据</td>
</tr>
</c:if>
</table>
<br>
</body>
</html>