首頁(yè) 猿問(wèn) 如何使用JQuery，動(dòng)態(tài)增加表格的列

如何使用JQuery，動(dòng)態(tài)增加表格的列

JavaScript

慕運(yùn)維8079593 2018-12-06 21:11:29

先上我的jsp源碼 <!doctype html> <html> <head> <meta charset="utf-8"> <title>無(wú)標(biāo)題文檔</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">期號(hào)</td> <td class="red" colspan="6">紅球</td> <td rowspan="2" class="blue">藍(lán)球</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">尾數(shù)</td> <td class="fenxi" rowspan="2">大</td> <td class="fenxi" rowspan="2">小</td> <td class="fenxi" colspan="3">012路</td> <td colspan="10">尾數(shù)分布</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> 這里有一個(gè)表格，表格的最后兩行是示例數(shù)據(jù)（這些數(shù)現(xiàn)在暫時(shí)是固定點(diǎn)，以后會(huì)通過(guò)數(shù)據(jù)庫(kù)查詢得到，是變化的），我的想法是：比較紅球一這列的連個(gè)數(shù)字01 04，應(yīng)該插入4列，并且在01顯示在2013080這一行，新插入列的第一列，04顯示在2013081這一行，新插入列的第四列，這里只是舉了一個(gè)例子說(shuō)明，實(shí)際上，這兩個(gè)數(shù)的差應(yīng)不止這么多，應(yīng)該插入的列也不會(huì)只是4列，我希望可以用JQuery來(lái)寫(xiě)，不過(guò)如果您有更好的辦法，也可以 ? 也許您看出來(lái)了，我這個(gè)是模仿雙色球的網(wǎng)站做的，我也是一個(gè)新手，只是自己給自己找的一個(gè)項(xiàng)目作為學(xué)習(xí)的目標(biāo)，希望你們不要笑話！

查看完整描述