前端练习56 表格行数据合并

最新推荐文章于 2024-03-29 12:01:10 发布
最新推荐文章于 2024-03-29 12:01:10 发布
阅读量664 收藏 1
点赞数
分类专栏： 前端练习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duola8789/article/details/97892947
版权
这篇博客介绍了一个前端实现表格行数据合并的需求。通过分析，作者提出当两行内容相同时，增加前一行的合并计数，并为当前行添加特定属性。采用双层循环遍历数据，比较基准值和当前行，以及检查左侧列数据是否相同以决定是否合并。最终，作者使用Vue框架实现了这一功能，并为数据添加了相应属性。
摘要由CSDN通过智能技术生成

题目

一个简单的小需求，要实现一个表格

如果表格两行的内容相同，则进行合并，实现的效果如下：

分析

表格的行数据合并关键是rowspan属性，想要实现合并，我的思路是，如果两行的数据相同，前一行的rowspan则+1，当前行的数据添加一个hidden属性设置true

这个思路需要两层的循环，外层遍历列，内层遍历行

首先设定一个基准值startRowIndex，取startRowIndex对应的数据与当前遍历行的数据进行比对，如果相同则基准数据的rowspan属性+1，当前行的数据的hidden设置为ture，如果不相同则将基准值startRowIndex设为当前行的序号设置

最低0.47元/天 解锁文章
「已注销」
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
尚硅谷web前端HTML5+CSS3笔记
qq_52380174的博客
12-19 4436
HTML/CSS笔记#自用#尚硅谷#李立超
js实现表格相同数据合并
07-10
相邻表格相同数据看起来不好看，而且显得冗余，如果将相邻表格的相同数据进行合并处理，不仅看起来美观很多，而且显得更加的专业。
〖大前端 - 基础入门三大核心之 html 篇⑯〗- 认识表格 与 合并单元格
热门推荐
易编橙 · 终身成长社群，相遇已是上上签！
03-09 2万+
我们已经把表单相关的内容学完了，知道了什么是表单、如何创建表单、表单有哪些基本控件等。网页中还有种比较常见的东西，就是表格。接下来就一起学习它吧。
2021.01.15表格的练习
m0_54087529的博客
01-17 145
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 五行六列
前端一级数据和多级数据合并单元格
suzhiwei_boke的博客
05-13 851
合并单元格
前端开发 表格元素 单元格的合并 0229
pyhui的技术博客
02-29 1035
学习目标 表格的语法 表格相关属性 table的属笥 关于表格合并的效果
超经典的Web前端与移动开发基础视频 Web前端基础开发视频教程 移动开发基础视频教程
08-20
56前端开发基础视频-类选择器id选择器综合案例.avi 57前端开发基础视频-复合选择器之标签指定式选择器.avi 58前端开发基础视频-复合选择器之后代选择器.avi 59前端开发基础视频-复合选择器之并集选择器.avi 60...
[前端]-CSS
JOHN
05-29 318
1. CSS语法规范 1.1 使用方式 （1）行内样式/内联样式 将css的样式写在元素的style属性中，key value间使用冒号，结束使用分号 color: 字体颜色 background-color: 背景色 font-size: 字体大小 语法： <any style="样式声明"/> 样式声明： 样式属性:样式值; 特点： 内联样式无法重用 内联样式优先级最高 由于内联样式优先级最高，无法被修改，所以项目中基本不用 （2）内部样式 <htm
JavaWeb 前端
笨羊的博客
12-22 838
Junit单元测试: * 测试分类: 1. 黑盒测试: 不需要写代码,给输入值,看程序是否能够输出期望的值 2. 白盒测试: 需要写代码,关注程序具体的执行流程 * Junit使用: 白盒测试 * 步骤 1. 定义一个测试类 (测试用例) * 建议: * 测试类名: 被测试的类名 * 包名 : xxx.xxx.xx.test cn.itcast.test 2. 定义测试方法:可以独立运行 * 建议: * 方法名: test测试的方法名 testA
前端合并单元格（行合并、列合并）
竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生
03-17 6747
原生js实现表格的行合并列合并
前端html——表格、合并、更改表格边框颜色
qq_41141657的博客
02-15 8682
水平居中 center 垂直居中 middle table表示声明一个表格 tr标签用来声明一行 td标签用来声明一个单元格 表格是横平竖直的，每一行单元格的数量都应该是一样的 每一行单元格的高度都一样 每一列单元格的宽度都一样 合并 保留要合并的单元格的第一个，删除其他的 给保留下来的单元格横向或纵向占用的单元格的数量 （合并左右关系的单元格，用colspan、合并上下关系，用rowspan...
保姆级教程 | 表格自动行合并实现
艾米栗的代码天地
08-26 1348
在 element-ui 和 antv 中都有表格合并，但如何确定哪几行要合并呢？ 在随机给定数据的情况下，如何实现自动合并呢？本文将一一解答这些问题。
前端表格合并单元格技巧
qq_42026600的博客
03-30 1455
前端表格合并单元格技巧
前端去除表体空行,获取表行数
Cc_Rain
01-11 307
nc.ui.ic.general.action.GeneralSaveAction getEditorModel().getCardPanelWrapper().filterNullLine(); int iRowCount = getEditorModel().getCardPanelWrapper().getBillCardPanel().getRowCount();
vue.js根据数据循环生成表格_Vue Elenent实现表格相同数据列合并
weixin_39611725的博客
01-15 819
本文实例为大家分享了Vue Elenent实现表格相同数据列合并的具体代码，供大家参考，具体内容如下作者：秋名思路：后台查询表格数据，查询出来后直接传到前端，前端通过foreach循环，然后对相同的表格进行合并。(同一个表格，但是每一行，固定一列的数据都相同，即可使用合并单元格，做到了既美观，也清晰。)template：:span-method="objectSpanMethod4" //在el-...
循环表格组件合并单元格
张火火
10-14 324
vue组件合并单元格
前台接收后台传过来的list进行遍历,然后根据表格用合并rowspan列
追风筝的人
07-10 9872
将数据以表格的信息进行展示,但是两行的开头要进行合并,可以用好多方法,下面是其中的一种： 后台代码(我进行了简化)： ModelAndView mv = new ModelAndView("页面路径"); List list = this.meetFindManager.findMeetInfoList(); mv.addObject("list", list); return mv;
element-ui/view-ui表格的合并行和列的多种方法（超级详细）
最新发布
前端探险家的博客
03-29 6619
vue的这两个组件库的表格的行和列的写法是一样的，都是通过span-method方法可以实现的；下面我们就以view ui的表格组件为例；该函数可以返回一个包含两个元素的数组，第一个元素代表 rowspan，第二个元素代表 colspan。也可以返回一个键名为 rowspan 和 colspan 的对象。看上面对该方法的说明太过于官方，我们直接去组件库把实现的效果图拿过来仔细分析一下；
fastadmin 前端数据表格获取当前行数据
05-26
在 FastAdmin 中，前端数据表格获取当前行数据可以通过以下步骤实现： 1. 在前端页面中，给数据表格绑定一个事件，比如点击事件。可以使用 jQuery 的 `click` 函数来实现： ```javascript $('#table').on('click-row.bs.table', function (e, row) { // 处理点击事件 }); ``` 2. 在事件处理函数中，可以通过参数 `row` 获取当前行的数据。例如，可以将数据显示在模态框中： ```javascript $('#table').on('click-row.bs.table', function (e, row) { $('#myModal').modal('show'); $('#myModal .modal-body').html(JSON.stringify(row)); }); ``` 这样就可以在点击数据表格的某一行时，弹出一个模态框并显示当前行的数据了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值