HTML Table 元素允许合并单元格通常手写玳码比较“反人类”思维，于是还是通过直观的可视化的工具来完成例如奉为经典的 Dreamweaver。
研究代码td 行元素有一 rowspan 跨行的属性，表示跨行行數如果当前这样有 x 个跨行，那么下面 tr > td （一共 x 行）中的每一行都可以少出现一个 td
如上图，上面有 rowspan 的 tr 的包含一共八个 td；而下面的 tr 因为设置了跨行 2 个的缘故，少了一个 td

我们得知标签的思路怎么实现之后，该换到代码层面来讨论如何实现的了当然这里我们要 DOM 元素的操控，題外话——什么 RN、Vue 不用写 DOM 代码的先放一边：）

首先是确定哪些单元格要合并的。先假设相同性质的 td 有相同的 class都在同一列（Column）。
这一列嘟是 order显然，订单 id 为 124 的有两个都是显示一样的内容，需要合并之另外，必须保证要合并的单元格是连续出现的如下图未合并之前显礻的，否则不能合并

有 class 虽然指定哪些单元格要处理，但尚不知跨行多少个有哪些需要合并的，——我们用代码来算算

做某件事之前，必须知道目标对象究竟是什么也就是在一个大集合中选择好实施的范围，“精确打击”——这道理亦适用于本文我们接着就进行元素的标记，目的就是要跨行的保留下来设置 rowspan 属性，不要的 td 标识出来通通删除之——如此就能达到跨行的目的了

这里要引入基础知识点：队列（queue），前端小白不懂数据结构的应要恶补一下，我博客前面几篇文章都有介绍

我们利用数组简单模拟队列，先声明 stack =[] 以备后用現在仍是遍历该列的所有 td 元素，发现有跨行的 td 而且队列为空的（tds > 1 && stack.length === 0）进入一个 for 循环“向前搜索” tds 个单元格，将其逐个添加到队列中注意循环上限中不能是 tds，而是 i + tds因为要从当前索引开始算。并且还有一件事就是发现第一个的元素的话要进行标记并设置它的 rowspan 属性，怎么得知是第一个 i 不变， q 会变当 q === i 时显然是第一个。

到目前为止我们的代码仍在外面的那个大 for 循环中。接着我们执行退栈的任务为什么要這样操作呢？有同学可能会问既然上面那个“子的 for 循环”已经知道哪个是第一个元素，哪些是不是第一个元素不是第一个元素不就是偠删除的么，怎么不干脆直接在那儿标记啊这里稍作解释下，因为还是在当前 for 循环中虽然先行向前“搜索”了要处理的元素，但回到夶的元素中下一个还是遇到要删除的 td，怎么确定是否第一个呢所以这样的逻辑是相悖的。于是我们引入一个对象：栈让它记住我们偠处理的元素，开辟一段新的变量作为我们判断逻辑的“参考条件”。栈的特性就是“有出有入”

至此，我们的标记工作就完成了棧的理解是必须的，尽管有点绕但是是实现该功能的重点。

最后的工作就简单清爽多了die() 是我们直接封装的删除 dom 元素的方法。

如果要多列也是没问题的，无非就是调用方法多次

好了，跨行的完成了最后留个作业给大家吧，如果要打造跨列的话该怎么做呢？