Question

我有下表格式。我想在用户单击此表的Row1的单元格时实现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");
}
});

希望以上链接可以帮助您。：）

使用colspan的html表 - 相邻的单元格问题

1 个答案: