我有下面的表格格式。当用户单击此表的第 1 行单元格时,我想实现 jquery 功能。
我想根据用户操作合并或拆分单元格。
比如说,用户点击“7-8”,然后它必须分成两个不同的单元格,例如 7 和 8,并提供适当的数据。
比如说,用户点击“2”,然后最近的左边单元格必须被合并,并形成一个像“1-2”这样的单元格,其中包含适当的数据。 (如“7-8”中给出的)。 同样,如果他点击“4”,那么它应该使用正确的数据创建“3-4”。
此处 Row2 和 Row5 单元格在合并的情况下跨越 2 列。(请参阅现有表格)。
我试图通过更改 colspan 值来实现它,但它不可行。 请提出更清洁的解决方案。
<table border=1 style="height:200px; border-top:0px;">
<tbody id="MySettings">
<tr>
<td width="15%">Row1</td>
<td colspan="0" width="10%">1</td>
<td colspan="0" width="10%">2<button type="button" style="float:right; margin-right:-6px; margin-top:-11px;"> </button></td>
<td colspan="0" width="10%">3</td>
<td colspan="0" width="10%">4<button type="button" style="float:right; margin-right:-6px; margin-top:-11px;"></button></td>
<td colspan="0" width="10%">5</td>
<td colspan="0" width="10%">6<button type="button" style="float:right; margin-right:-6px; margin-top:-11px;"> </button></td>
<td colspan="2" width="10%">7 - 8<button type="button" style="float:right; margin-right:-6px; margin-top:-11px;"></button></td>
</tr>
<tr id="MySettings_2">
<td>Row2</td>
<td colspan="0"> <input type="checkbox" name="CheckBox1" value="1" checked="true"></td>
<td colspan="0"> <input type="checkbox" name="CheckBox2" value="1" checked="true"></td>
<td colspan="0"> <input type="checkbox" name="CheckBox3" value="1" checked="true"></td>
<td colspan="0"> <input type="checkbox" name="CheckBox4" value="1" checked="true"></td>
<td colspan="0"> <input type="checkbox" name="CheckBox5" value="1" checked="true"></td>
<td colspan="0"> <input type="checkbox" name="CheckBox6" value="1" checked="true"></td>
<td colspan="2"> <input type="checkbox" name="CheckBox7_8" value="1" checked="true"></td>
</tr>
<tr id="Row3">
<td>Row3</td>
<td>88.98</td>
<td>33.98</td>
<td>43.34</td>
<td>123.98</td>
<td>0</td>
<td>65.43</td>
<td>33.19</td>
<td>27.8</td>
</tr>
<tr id="Row4">
<td>Row4</td>
<td>101</td>
<td>340</td>
<td>555.8</td>
<td>21</td>
<td>0</td>
<td>56</td>
<td>456</td>
<td>10</td>
</tr>
<tr id="Row5">
<td>Row5</td>
<td colspan="0">7</td>
<td colspan="0">3</td>
<td colspan="0">6</td>
<td colspan="0">0</td>
<td colspan="0">0</td>
<td colspan="0"> 4</td>
<td colspan="2">10</td>
</tr>
</tbody>
</table>
谢谢
最佳答案
$("#MySettings tr:first-child .col2").click(function() {
if($(this).attr("colspan") == "0") {
$(this).attr("colspan", "2");
$(this).prev().css("display","none");
$(this).text("1-2");
}
else {
$(this).attr("colspan", "0");
$(this).text("2");
$(this).prev().css("display","table-cell");
}
});
希望以上链接对您有所帮助。 :)
关于javascript - 带有 colspan 的 html 表格 - 相邻单元格问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39997004/