先上我的jsp源码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> body{ text-align:center; font-size:14px; } .issue{ width:72px; } .red { width:18px; height:18px; background-color:#D40000; } .blue { width:18px; height:18px; background-color:#7FDFFF; } .fenxi{ width:18px; height:18px; } </style> </head> <body> <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> <tr> <td class="issue">2013080</td> <td class="red">01</td> <td class="red">04</td> <td class="red">10</td> <td class="red">13</td> <td class="red">21</td> <td class="red">31</td> <td class="blue">13</td> </tr> <tr> <td class="issue">2013081</td> <td class="red">04</td> <td class="red">13</td> <td class="red">14</td> <td class="red">20</td> <td class="red">22</td> <td class="red">30</td> <td class="blue">06</td> </tr> </table> </td> <td> <table border="1" cellspacing="0" cellpadding="0"> <tr> <td rowspan="2" bgcolor="#FF7F00" class="fenxi">一位</td> <!-- 在此处加入动态的列 --> <td class="fenxi" colspan="2">奇偶</td> <td class="fenxi" colspan="2">升降</td> <td class="fenxi" colspan="3">012路</td> <td class="fenxi" rowspan="2" bgcolor="#FF7F00">尾数</td> <td class="fenxi" rowspan="2">大</td> <td class="fenxi" rowspan="2">小</td> <td class="fenxi" colspan="3">012路</td> <td colspan="10">尾数分布</td> <td class="fenxi" rowspan="2" bgcolor="#FF7F00">振幅</td> <td class="fenxi" rowspan="2">升</td> <td class="fenxi" rowspan="2">降</td> <td class="fenxi"colspan="3">012路</td> </tr> <tr> <td>奇</td> <td>偶</td> <td>升</td> <td>降</td> <td>0</td> <td>1</td> <td>2</td> <td>0</td> <td>1</td> <td>2</td> <td class="fenxi">0</td> <td class="fenxi">1</td> <td class="fenxi">2</td> <td class="fenxi">3</td> <td class="fenxi">4</td> <td class="fenxi">5</td> <td class="fenxi">6</td> <td class="fenxi">7</td> <td class="fenxi">8</td> <td class="fenxi">9</td> <td>0</td> <td>1</td> <td>2</td> </tr> <tr> <td bgcolor="#FF7F00" class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi" bgcolor="#FF7F00"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td class="fenxi" bgcolor="#FF7F00"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> </tr> <tr> <td bgcolor="#FF7F00" class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi" bgcolor="#FF7F00"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td class="fenxi" bgcolor="#FF7F00"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> <td class="fenxi"> </td> </tr> </table> </td> </tr> </table> </body> </html>
这里有一个表格,表格的最后两行是示例数据(这些数现在暂时是固定点,以后会通过数据库查询得到,是变化的),我的想法是:比较红球一这列的连个数字01 04,应该插入4列,并且在01显示在2013080这一行,新插入列的第一列,04显示在2013081这一行,新插入列的第四列,这里只是举了一个例子说明,实际上,这两个数的差应不止这么多,应该插入的列也不会只是4列,
我希望可以用JQuery来写,不过如果您有更好的办法,也可以
也许您看出来了,我这个是模仿双色球的网站做的,我也是一个新手,只是自己给自己找的一个项目作为学习的目标,希望你们不要笑话!
api.jquery.com 。。既然是学习,那你参考jquery api,插入即可。你这样问了,你又想学什么呢?
最简单的办法就是每次都重新画你的表格。
其实你可以直接用finereport来做,要方便一些