当前位置: 首页 > news >正文

原生table动态数据,通过jQuery实现相同数据时候跨行合并

实现思路:
1、找出需要合并的列(col)
2、遍历table中的每⼀⾏(tr)。结合列数(col)。进⾏遍历每⼀⾏的tr
3、判断当前tr和下⼀⾏的tr是否相同,如果相同,那么为下⼀⾏的tr添加⼀个class。⽅便后续删除
4、为当前重复的第⼀项tr添加rowspan属性
5、删除带有标记的tr
一下是代码

<table id="tableId">
                    <thead>
                        <tr>
                            <th>分类</th>
                            <th>指标名称</th>
                            <th>全省</th>
                            <th>南昌市</th>
                            <th>景德镇</th>
                            <th>萍乡市</th>
                            <th>九江市</th>
                            <th>新余市</th>
                            <th>鹰潭市</th>
                            <th>赣州市</th>
                            <th>吉安市</th>
                            <th>宜春市</th>
                            <th>抚州市</th>
                            <th>上饶市</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in tableData" :key="index">
                            <td>{{item.fenlei}}</td>
                            <td>{{item.zbmc}}</td>
                            <td>{{item.qs}}</td>
                            <td>{{item.ncs}}</td>
                            <td>{{item.jdz}}</td>
                            <td>{{item.pxs}}</td>
                            <td>{{item.jjs}}</td>
                            <td>{{item.xys}}</td>
                            <td>{{item.yts}}</td>
                            <td>{{item.tzs}}</td>
                            <td>{{item.jas}}</td>
                            <td>{{item.ycs}}</td>
                            <td>{{item.fzs}}</td>
                            <td>{{item.srs}}</td>
                        </tr>
                    </tbody>
                </table>
 // table的id  需要合并的列(从0开始算)
        mergeCell(tableId, cols) {
            var table = document.getElementById(tableId);
            var table_rows = table.rows;
            // 需要合并的列的数组
            cols.forEach((v, k) => {
                // 循环table每⼀⾏
                for (let i = 0; i < table_rows.length - 1; i++) {
                    // row
                    let now_row = table_rows[i];
                    let next_row = table_rows[i + 1];
                    // col
                    let now_col = now_row.cells[v];
                    let next_col = next_row.cells[v];
                    if (now_col.innerHTML == next_col.innerHTML) {
                        // 标记为需要删除
                        $(next_col).addClass('remove')
                        // 递归判断当前对象时候已经被删除
                        this.setParentSpan(table, i, v)
                    }
                }
            })
            $(".remove").remove();
        },
        // (递归⽅法,⽤于多⾏统计) pram => table表格当前⾏对应的列
        setParentSpan(table, row, col){
            var col_item=table.rows[row].cells[col]
            console.log(col_item)
            if($(col_item).hasClass('remove')){
                this.setParentSpan(table,--row,col)
            }else{
                col_item.rowSpan+=1
            }
        }

 

相关文章:

  • 祖国啊,情深难载
  • 纯JavaScript实现表白代码
  • SpringCloudGateway 学习笔记 - 搭建项目
  • MySQL学习笔记:一条SQL语句的执行过程
  • Springboot框架建立(1)
  • mongodb数据模型设计
  • Java学习笔记:SQLite数据库
  • 通过mockjs生成随机响应数据
  • VGG16-好莱坞明星识别
  • 《运营商劫持, 中间人攻击, 黑客入侵怎么办?》- HTTPS 技术反制
  • Vue项目的记录(七)
  • 【云原生 • Kubernetes】集群资源监控概述、监控平台的搭建
  • SpringCloud Stream基本使用
  • 没有CANdela,无法编辑cdd数据库文件,也能轻松完成诊断测试,立省大二十个w
  • 【Linux】基本指令 (下篇)
  • [LeetCode] Wiggle Sort
  • 【跃迁之路】【699天】程序员高效学习方法论探索系列(实验阶段456-2019.1.19)...
  • android高仿小视频、应用锁、3种存储库、QQ小红点动画、仿支付宝图表等源码...
  • Angular 响应式表单 基础例子
  • Bytom交易说明(账户管理模式)
  • Centos6.8 使用rpm安装mysql5.7
  • es的写入过程
  • Java教程_软件开发基础
  • MySQL Access denied for user 'root'@'localhost' 解决方法
  • 创建一个Struts2项目maven 方式
  • 后端_MYSQL
  • 聊聊spring cloud的LoadBalancerAutoConfiguration
  • 七牛云 DV OV EV SSL 证书上线,限时折扣低至 6.75 折!
  • 适配mpvue平台的的微信小程序日历组件mpvue-calendar
  • 王永庆:技术创新改变教育未来
  • 为物联网而生:高性能时间序列数据库HiTSDB商业化首发!
  • 智能合约Solidity教程-事件和日志(一)
  • #android不同版本废弃api,新api。
  • #pragma data_seg 共享数据区(转)
  • (07)Hive——窗口函数详解
  • (1)(1.11) SiK Radio v2(一)
  • (3)Dubbo启动时qos-server can not bind localhost22222错误解决
  • (C#)Windows Shell 外壳编程系列4 - 上下文菜单(iContextMenu)(二)嵌入菜单和执行命令...
  • (C语言)fread与fwrite详解
  • (Git) gitignore基础使用
  • (十三)Maven插件解析运行机制
  • (实战)静默dbca安装创建数据库 --参数说明+举例
  • (一)80c52学习之旅-起始篇
  • (转)h264中avc和flv数据的解析
  • (转)IOS中获取各种文件的目录路径的方法
  • *2 echo、printf、mkdir命令的应用
  • .java 指数平滑_转载:二次指数平滑法求预测值的Java代码
  • .NET Framework .NET Core与 .NET 的区别
  • .net的socket示例
  • .net网站发布-允许更新此预编译站点
  • .NET中GET与SET的用法
  • .Net组件程序设计之线程、并发管理(一)
  • @transaction 提交事务_【读源码】剖析TCCTransaction事务提交实现细节
  • [ 渗透测试面试篇 ] 渗透测试面试题大集合(详解)(十)RCE (远程代码/命令执行漏洞)相关面试题
  • [ 英语 ] 马斯克抱水槽“入主”推特总部中那句 Let that sink in 到底是什么梗?