html表格自动合并

万恶的产品设计一个动态表格合并的功能,曾经实现了一版运用js进行dom元素的拼接,发现代码量好大,
后来产品再次设计了类似表格,复用之前代码感觉心好累,所以我就花十分钟仔细想了下,得出下面的解决方案。
最终效果为 https://goddywu.github.io/html/demo/table_combine.html
源码地址 https://github.com/Goddywu/html/blob/master/demo/table_combine.html

场景

想象一个情景,我们需要记录用户的操作,并展示出来,用户在相邻时间点做的同样操作,我们希望它们占据同一个格子。

思路

  • 如果我们希望做一个3X2的表格,第二列合并前两格,那么我们的HTML代码将是
<table>
  <tr>
    <td>1行1列</td>
    <td rowspan="2">第2列前两格</td>
  </tr>
  <tr>
    <td>2行1列</td>
  </tr>
  <tr>
    <td>3行1列</td>
    <td>3行2列</td>
  </tr>
<table>
  • 观察需要合并的第二列,合并前我们每个行元素tr内需要有第二列的td元素,假设1代表存在,那么第二列的td存在情况为 [1, 1, 1]
  • 观察合并后的第二列的td元素存在情况,为 [1, 0, 1]
  • 如果将rowspan的值代替掉第一个td元素,那么我们得到的数组为 [2, 0, 1],数组名称设置为temp
  • 有了这个数组就好办了,我们可以用vue的v-on绑定rowspan,用v-if来去掉例如第二行不需要的第二个td元素。
  • 数据为
#已知数据
data = [
  ['2018-01-01', '买包子'],
  ['2018-01-02', '吃包子'],
  ['2018-01-03', '吃包子']
]
#我们需要计算出的数组
array = [2, 0, 1]
  • 我们的代码将是
<table>
  <tr v-for='(i, index) in data'>
    <td>
      {{i[0]}}
    </td>
    <td v-if='temp[index] != 0'>
      {{i[1]}}
    </td>
  </tr>
</table>

接下来,就是核心:如何得出数组array

思路:

建立一个temp作缓存变量,count作为计数器,遍历data数组,如果值与temp相同,则计数器加1,如果不同,则temp值赋值为当前值,并且计数器重置。

所有代码戳链接

参考资料

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,534评论 19 139
  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 9,698评论 0 13
  • 细雨含风午日来, 雄黄酒洒楚江杯。 榴花不吐相思语, 且把香蒲挂祭台。 (朱门寒月作,文图版权保留,转载使用请注明...
    姀月阅读 2,976评论 4 6
  • 这几天,看到各大网站和论坛在刷一个话题:你最穷的时候是怎么熬过来的? 于是,来自四海八荒的网友纷纷评论吐槽自己的穷...
    安语心阅读 4,112评论 10 20