深入浅出：利用JavaScript和CSS进行表格合并的解决方案

最新推荐文章于 2024-03-24 20:14:38 发布

是冉冉啊

最新推荐文章于 2024-03-24 20:14:38 发布

阅读量632

点赞数

文章标签： javascript html5 css java

本文链接：https://blog.csdn.net/weixin_54317331/article/details/135519254

版权

本文介绍了一种利用JavaScript和CSS进行表格单元格合并的方法。通过在单元格前添加复选框，用户可以选择要合并的单元格，后端接收到ID后对比内容并执行合并。内容相同的单元格在前端隐藏，数据在后端仍保留。文章讨论了跨行和跨列合并策略，并提及了处理ID字符串的注意事项。

摘要由CSDN通过智能技术生成

继上一篇可管理网页，怎样实现单元格合并
效果：

思路：

首先，在需要进行合并操作的每个单元格内容前方，我们引入一个交互式的复选框组件，以便用户能够自主勾选想要参与合并操作的单元格。每一项被勾选的内容都会对应一个唯一的ID，这个ID将随着用户的操作动态传递至后端系统进行进一步处理。

当用户完成选择并提交后，后端系统接收到各个单元格ID后，针对内容相同的单元格执行合并策略。在此过程中，那些被合并的内容将被巧妙地隐藏起来，以避免数据冗余和视觉混乱，确保表格展示的清晰性和简洁性。

具体实现上，只保留其中一个代表性的单元格内容展现给用户，其余被合并的内容则在前端界面中予以隐藏，而在实际的数据结构和存储中仍然得到妥善维护

效果：

当用户完成选择并点击“合并”按钮时，前端会立即收集所有被勾选单元格对应的唯一ID，并将这些ID列表作为参数传递给后端系统。后端接收到这一系列ID后，根据预设的合并规则和算法，对相应的单元格执行合并处理。

前段代码：

<li>
    <button type="button" class="button" id="searchBtn" style="margin-left: 60px;height: 40px;" onclick="mergeCells()">合并</button>
</li>


<td th:if="${list2.getMain_bank() == 1 && (list2.getRowsize() != 0 ) && (list2.getColsize() == 0)}"
    th:rowspan="${list2.getRowsize()}">
    <input type="checkbox" class="merge-cell" name="merge[]" th:value="${list2.getId()}">
    <a style="cursor: pointer;text-decoration: none" >
        <span th:if="${list2.getNeirong() == null || ''.equals(list2.ge