带有colspan的html表格 - 相邻单元格问题

Question

我有下表格式。当用户单击此表的第 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>

谢谢

Answer 1

JSfiddle Link

$("#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");
}
});

希望以上链接对您有所帮助。 :)