js 合并 table 行

最新推荐文章于 2024-07-22 17:15:52 发布
最新推荐文章于 2024-07-22 17:15:52 发布
阅读量3.8k 收藏 1
点赞数
分类专栏： javascript 文章标签： table 存储 function 2010 c
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/myhahaxiao/article/details/6680165
版权
 

Js 合并 table 行 的实现方法

需求如下:

 

某公司的员工档案，如下,  经理看员工的信息不是很清晰:

 

姓名

所在学校

毕业时间

张三

小学

2000

张三

中学

2006

张三

大学

2010

李四

小学

2000

李四

中学

2006

王五

小学

2006

 

所以要求要求姓名一列如果发现挨着的名字相同的话,将其合并为一行,如下图所示:

 

姓名

所在学校

毕业时间

 

张三

小学

2000
最低0.47元/天 解锁文章
abcd_ufo
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js合并table内容相同的行和列
czh4869623的专栏
09-02 3161
1）方法： /*合并指定表格列（表格id为table_id）指定列（列数为table_colnum）的相同文本的相邻单元格 param：table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data param：table_colnum 为需要合并单元格的所在列。为数字，从最左边第一列为1开始算起。*/ function table_rowspan(table_id, table_colnum)
Antd 合并table行、列
qq_29050279的博客
03-03 1958
const list = [ { key: '1', rowId: 1, name: 'Jim Green', tel: '0571-22098333', phone: 18889898888, age: 42, address: 'London No. 1 Lake Park', }, { key: '2', rowId: 1, name: 'Joe Black', age: 32, tel: '0
el-table 合并相同行
最新发布
qq_35478008的博客
07-22 172
使用 :span-method="objectSpanMethod"二、如果整体依据id值是否相同来合并时。一、如果每一列依据的合并字段不同时。
js【table】合并行，合并列
weixin_30915951的博客
02-28 845
eg： 1 function hbh() { 2 var tab = document.getElementById("tableID"); 3 var maxCol = 2, val, count, start, qycol = 1, valqy; //maxCol：合并单元格作用到多少列,valqy 为区域列...
js自动合并table相同的行（也适用于自动生成的table）
代码笔记
09-09 3442
js自动合并table相同的行（也适用于自动生成的table）
el-table表格合并行
宁
12-28 1060
el-table表格合并行
el-table行合并
qq_36712606的博客
05-06 3716
需要把指定列的相同且相邻的数据合并起来 在获取tabledata的接口调用getSpanArr方法,此方法通过遍历把需要合并的字段id判断,相同的就给spanArr数组加一,在表格渲染时调用objectSpanMethod方法 需要新增一个数组spanArr接受判断的数据 <el-table :data="tableData" :span-method="objectSpanMethod" border .
el-table 合并行
yusun1234的博客
07-12 2758
表格合并
原生table合并行和列
qq_37881606的博客
12-07 5611
原生table合并行和列 代码开始前的条件： HTML + vue2 + table vue是直接在script标签内引用的cdnjs（只是做功能，没有太多的调整样式） <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script> 思路： 1、先把表头固定一下，rowspan和colspan搞起来； 2、整理数据，把同样的受理员名称合并到一起，循环判断前后数据是否相同，相同的话
原生JS实现HTML－ TABLE 自动行合并插件
06-30
类功能描述：该插件生成一个具有行合并的列表数据，合并例由开发者指定。 开发者提供已排序的数据列表以及需要合并行的列名即可，无需后端二次处理数据。 该类以纯原生JS编写，无需引入任何第三方库。 调用方法：...
JS 实现Table相同行的单元格自动合并示例代码
10-26
Table相同行的单元格自动合并，使用js来实现此效果，具体代码下，感兴趣的朋友可以参考下
JStable动态合并相同行
09-02
JS table动态合并相同行,只需传入table名称，js自动合并
合并table的行
12-14
本文将深入探讨如何实现“合并table的行”这一功能，以及其背后的原理与应用场景。 ### 合并table的行：原理与实现 在Web开发中，`<table>`元素用于显示数据的表格形式，而合并行的功能主要通过`<td>`或`<th>`标签...
JS实现动态修改table及合并单元格的方法示例
10-20
在JavaScript中，动态修改表格（Table）以及合并单元格是常见的需求，特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先，要动态修改表格，我们需要获取表格元素。在HTML中，表格...
Js apply 方法 详解
热门推荐
raisezhang 的专栏
11-09 8万+
Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家分享..  如有什么不对的或者说法不明确的地方希望读者多多提一些意见,以便共同提高.. 主要我是要解决一下几个问题: 1.        apply和call的区别
javascript typeof 和 instanceof 的区别和联系
raisezhang 的专栏
09-01 1万+
这篇文章是我看完《JavaScript高级程序设计(第2版)》书籍的随笔文章,目的只有一个,以备自己和网友们方便参考和记忆! typeof是什么?       typeof 是一个操作符,主要的目的是检测一个变量是不是基本数据类型的变量,同时也可以说是确定一个变量是字
ie 跨站脚本
raisezhang 的专栏
12-29 4666
ie浏览器提示错误的原字样为: Internet Explorer 已对此页面进行了修改,以帮助阻止跨站点脚本! 对不起各位博友： 下面我的观点是属于我当时知识缺乏，下面那种方式是不建议大家使用的（真是有点误导大家，Sorry *_*） ， 浏览器不允许跨站情况下 post/get 请求数据，要实现的方式只有jsonp的形式才能实现跨站请求 （当然你要请求的服务得支持jsonp的形式哦
Ie9 ext tree 失效
raisezhang 的专栏
11-21 3048
我看到好多网上实现ie9ext tree的办法都是通过渲染模式为ie8 或者更低的浏览器,其实现的代码都是添加meta标记(),这样是可以解决ie9中面板事件失效的问题,但是这不是一个最终的解决办法,通过我一天的调试研究,我修改了下ext-all.js的代码,之后通过一步一步调试,才解决了ie9的这个问题.. 下面我详细说下哪里错了,具体怎么改,以后我们应该注意什么. 1.哪里错了:
js动态合并table指定表格列、行
06-10
你可以使用JavaScript动态合并指定表格列或行来实现。以下是一个简单的示例代码： 合并指定列： ```javascript function mergeColumn(table, colIndex) { var rows = table.rows; var firstRow = rows[0]; var cellCount = firstRow.cells.length; var start = 1; var end = 0; var prevValue = ""; for (var i = 0; i < cellCount; i++) { if (i == colIndex) { for (var j = 1; j < rows.length; j++) { var currentValue = rows[j].cells[i].innerHTML; if (currentValue == prevValue) { end = j; } else { if (end > start) { mergeCells(rows, start, end, i); } prevValue = currentValue; start = j; end = j; } } if (end > start) { mergeCells(rows, start, end, i); } break; } } } function mergeCells(rows, start, end, colIndex) { for (var i = start; i <= end; i++) { rows[i].cells[colIndex].rowSpan = end - start + 1; for (var j = colIndex + 1; j < rows[i].cells.length; j++) { rows[i].cells[j].style.display = "none"; } } } ``` 合并指定行： ```javascript function mergeRow(table, rowIndex) { var rows = table.rows; var cells = rows[rowIndex].cells; var cellCount = cells.length; var start = 0; var end = 0; var prevValue = ""; for (var i = 0; i < cellCount; i++) { var currentValue = cells[i].innerHTML; if (currentValue == prevValue) { end = i; } else { if (end > start) { mergeCells(rows, rowIndex, start, end); } prevValue = currentValue; start = i; end = i; } } if (end > start) { mergeCells(rows, rowIndex, start, end); } } function mergeCells(rows, rowIndex, start, end) { rows[rowIndex].cells[start].colSpan = end - start + 1; for (var i = start + 1; i <= end; i++) { rows[rowIndex].deleteCell(start + 1); } } ``` 你可以根据需要调用这些函数来合并表格的指定列或行。例如，要合并第2列，可以调用mergeColumn(table, 1)函数。要合并第3行，可以调用mergeRow(table, 2)函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值