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

这里有一个表格，表格的最后两行是示例数据（这些数现在暂时是固定点，以后会通过数据库查询得到，是变化的），我的想法是：比较红球一这列的连个数字01 04，应该插入4列，并且在01显示在2013080这一行，新插入列的第一列，04显示在2013081这一行，新插入列的第四列，这里只是举了一个例子说明，实际上，这两个数的差应不止这么多，应该插入的列也不会只是4列，
我希望可以用JQuery来写，不过如果您有更好的办法，也可以
也许您看出来了，我这个是模仿双色球的网站做的，我也是一个新手，只是自己给自己找的一个项目作为学习的目标，希望你们不要笑话！<!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>
如何使用JQuery，动态增加表格的列jQueryJavaScriptHTML

解决方案 »

  1.   

    有可用的扩展,例如:jquery datagrid你是要自已写一个扩展？随便提一下同学?
    re：
    学习学一点工作中大多数会遇到的情况，别拿些应用不广的点来学习
      

  2.   

    //listTable你的table的ID
                            $("#listTable tr:eq(0)").after("<tr><td rowspan=2 bgcolor=#FF7F00 class=fenxi>一位</td><td class=fenxi colspan=2>奇偶</td>olspan="3">012路</td></tr>");
    要是动态的，直接在后台组合好就行了。
      

  3.   

    $('tr').append('<td></td>')
      

  4.   

    http://www.php100.com/manual/jquery/ 里面方法例子多多