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

horse_leo_zhcn 2013-07-17 10:18:39
这里有一个表格,表格的最后两行是示例数据(这些数现在暂时是固定点,以后会通过数据库查询得到,是变化的),我的想法是:比较红球一这列的连个数字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"> </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>
如何使用JQuery,动态增加表格的列
...全文
481 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
街头小贩 2013-07-18
  • 打赏
  • 举报
回复
有可用的扩展,例如:jquery datagrid 你是要自已写一个扩展? 随便提一下同学? re: 学习学一点工作中大多数会遇到的情况,别拿些应用不广的点来学习
Null_Reference 2013-07-18
  • 打赏
  • 举报
回复
http://www.php100.com/manual/jquery/ 里面方法例子多多
ZHOU西口 2013-07-18
  • 打赏
  • 举报
回复
$('tr').append('<td></td>')
敛我半世癫狂 2013-07-18
  • 打赏
  • 举报
回复
//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>");
要是动态的,直接在后台组合好就行了。

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧