首页 新闻 会员 周边

如何使用JQuery,动态增加表格的列

0
悬赏园豆:20 [已解决问题] 解决于 2013-07-21 13:53

先上我的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">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi" bgcolor="#FF7F00">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td class="fenxi" bgcolor="#FF7F00">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
          </tr>
          <tr>
              <td bgcolor="#FF7F00" class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi" bgcolor="#FF7F00">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td class="fenxi" bgcolor="#FF7F00">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
            <td class="fenxi">&nbsp;</td>
          </tr>
     </table>
  </td>
  </tr>
</table>

</body>
</html>

这里有一个表格,表格的最后两行是示例数据(这些数现在暂时是固定点,以后会通过数据库查询得到,是变化的),我的想法是:比较红球一这列的连个数字01 04,应该插入4列,并且在01显示在2013080这一行,新插入列的第一列,04显示在2013081这一行,新插入列的第四列,这里只是举了一个例子说明,实际上,这两个数的差应不止这么多,应该插入的列也不会只是4列,

我希望可以用JQuery来写,不过如果您有更好的办法,也可以

 

也许您看出来了,我这个是模仿双色球的网站做的,我也是一个新手,只是自己给自己找的一个项目作为学习的目标,希望你们不要笑话!

horse_leo的主页 horse_leo | 初学一级 | 园豆:17
提问于:2013-07-17 22:17
< >
分享
最佳答案
0

api.jquery.com 。。既然是学习,那你参考jquery api,插入即可。你这样问了,你又想学什么呢?

收获园豆:15
幻天芒 | 高人七级 |园豆:37175 | 2013-07-18 13:14
其他回答(2)
0

最简单的办法就是每次都重新画你的表格。

收获园豆:5
小兵仔 | 园豆:1240 (小虾三级) | 2013-07-18 17:25
0

其实你可以直接用finereport来做,要方便一些

ilovejava | 园豆:224 (菜鸟二级) | 2015-01-27 11:43
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册