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

标签 javascript jquery html css html-table

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

谢谢

最佳答案

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

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

关于javascript - 带有 colspan 的 html 表格 - 相邻单元格问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39997004/

相关文章:

javascript - AngularJS:如何公开服务 API/变量

javascript - 通过 Promise 创建并执行多个 Ajax 请求

javascript - AngularJS 提供者和模型

javascript - d3.js 水平条形图 - 将 Y 轴保持在图表中间

jquery - 我如何防止它向下推?

javascript - Canvas 绘制不正确(不稳定)

javascript - 动态国家、州、城市下拉选择

jquery - iframe 对于我的 MVC Web 应用程序场景是好是坏

html - 元字符集 windows-1252 与 UTF-8

javascript - 将 CSS 应用于 printWindow.print();在 JavaScript 中