JS处理table表格根据某列判断重复合并单元格

最新推荐文章于 2024-12-28 15:36:01 发布

Oopy

最新推荐文章于 2024-12-28 15:36:01 发布

阅读量727

点赞数 5

文章标签： javascript jquery html

本文链接：https://blog.csdn.net/qq_39534956/article/details/138656122

版权

本文介绍了如何使用JavaScript处理HTML表格，根据某列数据的重复情况来合并单元格。首先理解表格合并的原理，然后通过遍历数据列表，检查当前列的重复项，并设置合适的rowspan属性来实现合并。示例代码包括HTML结构和JavaScript处理逻辑。

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

原表格：
在这里插入图片描述
合并后：

实现思路：

在做合并表格前要先搞懂合并的原理，推荐阅读：
〖大前端 - 基础入门三大核心之 html 篇⑯〗- 认识表格与合并单元格
table数据为list一维数组，获取当前列存在重复的数量，且判断是否为第一条数据，若为第一条重复数据则加上rowspan，否则判断重复的数量是否为1才展示，具体代码如下：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="data.js"></script>
  <script src="1.js"></script>
</head>
<style>
  td{
     
    text-align: center;
    padding: 0 20px;
  }
</style>
<body>
  <table border="1">
    <thead>
      <tr>
        <th>商品编码</th>
        <th>商品名称</th>
        <th>计量单位</th>
        <th>采购申请号</th>
        <th>行项目号</th>
        <th>发货数量</th>
        <th>订单数量</th>
      </tr> 
    </thead>
    <tbody id="purchaseOrderBeanInfo"></tbody>
  </table>
</body>
</html>

JS：

$(function () {
   
  const list = getList();
  initData()
  function initData() {
   
    list.forEach((item, index) => {
   
      const [num1, isFirst1] = getRepeatNum('sku', item.sku, index)
      const [num2] = getRepeatNum('purchaseId', item.purchaseId, index, item.sku)
      const productNum = getRepeatNum('productNum', item.productNum, index, item.sku)
      let $tr = $("<tr></tr>");
      if (isFirst1) {
   
        $tr.append($(`<td rowspan="${
     num1}" class="tdContentMiddle"></td>`).append(item.sku));
        $tr.append($(`<td rowspan="${
     num1}" class="tdContentMiddle"></td>`).append(item.productName));
        $tr.append($(`<td rowspan="${
     num1}" class="tdContentMiddle"></td>`).append(item.productUnit