Javascript 如何计算表示 HTML 表的树状 struct 的行跨度

th, td { border: 1px solid black }

<table>
  <thead>
    <tr>
      <th colspan="3">Major 1</th>
      <th rowspan="3">col4</th>
    </tr>
    <tr>
      <th colspan="2">Sub 1</th>
      <th rowspan="2">col3</th>
    </tr>
    <tr>
      <th>col1</th>
      <th>col2</th>
    </tr>
  </thead>
</table>

const columns = [{
  title: "Major1",
  children: [{
    title: "Sub1",
    children: [{
      title: "col1"
    }, {
      title: "col2"
    }]
  }, {
    title: "col3"
  }]
}, {
  title: "col4"
}];

const columns = [{
  title: "Major1",
  children: [{
    title: "Sub1",
    children: [{
      title: "col1"
    }, {
      title: "col2"
    }]
  }, {
    title: "col3"
  }]
}, {
  title: "col4"
}];

function traverse(currentColumns) {
  for (const currentColumn of currentColumns) {
    currentColumn.colspan = 1;
    currentColumn.rowspan = 1;

    if (currentColumn.children) {
      traverse(currentColumn.children);

      currentColumn.colspan = currentColumn.children.reduce((totalColspan, childColumn) => totalColspan + childColumn.colspan, 0);
    }
  }
}

traverse(columns)

console.log(columns);

let maxLevel = 0;
const items = [];

traverse(columns);

items.forEach(item => item.rowSpan = 1 + maxLevel - item.level);

console.log(columns);

function traverse(arr, level = 0){
  for(const item of arr){
    item.colSpan = 1;
    item.level = level;
    maxLevel < level && (maxLevel = level);
    if(item.children){
      item.rowSpan = 1;
      traverse(item.children, level + 1);
      item.colSpan = item.children.reduce((sum, child) => sum + child.colSpan, 0);
    }else{
      items.push(item);
    }
  }
}

<script>
const columns = [{
  title: "Major1",
  children: [{
    title: "Sub1",
    children: [{
      title: "col1"
    }, {
      title: "col2"
    }]
  }, {
    title: "col3"
  }]
}, {
  title: "col4"
}];
</script>

Javascript相关问答推荐

如果使用React Select ，如何将CSS类添加到元素中？

回归函数不会迭代到foreach中的下一个元素

将未等待的未处理的错误promise 转变为警告@ changeTicksAndRejections(由当时的抛出错误创建)

我的YouTube视频没有以html形式显示，以获取免费加密信号

从连接字符串创建客户端时，NodeJS连接到CosmosDB失败

如何获取转换字节的所有8位？

react/redux中的formData在expressjs中返回未定义的req.params.id

Google Apps脚本中的discord邀请API响应的日期解析问题

调用removeEvents不起作用

docx.js：如何在客户端使用文档修补程序

从WooCommerce Checkout Country字段重新排序国家，保持国家同步

v—自动完成不显示 Select 列表中的所有项目

用于编辑CSS样式的Java脚本

如何在coCos2d-x中更正此错误

创建以键值对为有效负载的Redux Reducer时，基于键的类型检测

如何在 Select 文本时停止Click事件？

为什么云存储中的文件不能公开使用？

在Odoo中如何以编程方式在POS中添加产品

JavaScript -复制到剪贴板在Windows计算机上无效

为什么我看到的是回复，而不是我的文档？