js基于后台数据实现table行列合并
2024-05-23 09:17:51
方式一
实现效果
先写一个基本的html页面
<!DOCTYPE html>
<html>
<head><title>test table</title>
</head>
<body><table id="testTable"></table>
</body>
</html>
<script type="text/javascript">
</script>
接着造数据
<script type="text/javascript">//演示数据var dt = [{ siteName: '武昌站', type: '快速', trainCode: 'K82', enterTime: '6:01', leaveTime: '6:08', duration: 6 },{ siteName: '武汉站', type: '动车', trainCode: 'D289', enterTime: '8:24', leaveTime: '8:32', duration: 8 },{ siteName: '汉口站', type: '动车', trainCode: 'D158', enterTime: '8:24', leaveTime: '8:32', duration: 8 },{ siteName: '武汉站', type: '高铁', trainCode: 'G129', enterTime: '8:24', leaveTime: '8:32', duration: 8 },{ siteName: '武汉站', type: '高铁', trainCode: 'G68', enterTime: '8:24', leaveTime: '8:32', duration: 8 },{ siteName: '武昌站', type: '动车', trainCode: 'D5242', enterTime: '9:02', leaveTime: '9:10', duration: 8 },{ siteName: '武昌站', type: '直达', trainCode: 'Z168', enterTime: '10:52', leaveTime: '10:57', duration: 5 },{ siteName: '汉口站', type: '动车', trainCode: 'D86', enterTime: '8:00', leaveTime: '8:05', duration: 5 },{ siteName: '汉口站', type: '直达', trainCode: 'Z35', enterTime: '8:24', leaveTime: '8:32', duration: 8 },{ siteName: '武昌站', type: '特快', trainCode: 'T254', enterTime: '6:55', leaveTime: '7:02', duration: 7 },{ siteName: '汉口站', type: '快速', trainCode: 'K91', enterTime: '8:24', leaveTime: '8:32', duration: 8 },{ siteName: '武汉站', type: '动车', trainCode: 'D5146', enterTime: '8:24', leaveTime: '8:32', duration: 8 },{ siteName: '武汉站', type: '高铁', trainCode: 'G362', enterTime: '8:24', leaveTime: '8:32', duration: 8 },{ siteName: '汉口站', type: '直达', trainCode: 'Z38', enterTime: '8:24', leaveTime: '8:32', duration: 8 },{ siteName: '汉口站', type: '特快', trainCode: 'T232', enterTime: '8:24', leaveTime: '8:32', duration: 8 },{ siteName: '武汉站', type: '高铁', trainCode: 'G69', enterTime: '8:24', leaveTime: '8:32', duration: 8 },{ siteName: '武昌站', type: '直达', trainCode: 'Z25', enterTime: '21:56', leaveTime: '22:08', duration: 12 },{ siteName: '武汉站', type: '动车', trainCode: 'D91', enterTime: '8:24', leaveTime: '8:32', duration: 8 },{ siteName: '武昌站', type: '快速', trainCode: 'K82', enterTime: '6:02', leaveTime: '6:08', duration: 6 },{ siteName: '武昌站', type: '快速', trainCode: 'K82', enterTime: '6:03', leaveTime: '6:08', duration: 6 },];//数据排序dt.sort(function (a, b) {if (a.siteName === b.siteName) {if(a.type === b.type){return a.trainCode > b.trainCode ? 1 : a.trainCode < b.trainCode ? -1 : 0;}else if(a.type > b.type){return 1;}else {return -1;}} else if (a.siteName > b.siteName) {return 1;} else {return -1;}})//数据加载var sn = 1, tp = 1,tc=1, ht = '';for (var i = dt.length - 1; i > 0; i--) {var d = dt[i], p = dt[i - 1];var col1 = d.siteName === p.siteName ? '' : ('<td name="col_1" rowspan="' + sn + '">' + d.siteName + '</td>');var col2 = d.siteName === p.siteName && d.type === p.type ? '' : ('<td name="col_2" rowspan="' + tp + '">' + d.type + '</td>');var col3 = d.siteName === p.siteName && d.type === p.type && d.trainCode === p.trainCode ? '' : ('<td name="col_3" rowspan="' + tc + '">' + d.trainCode + '</td>');ht = '<tr>' + col1 + col2 + col3 + '<td>' + d.enterTime + '</td><td>' + d.leaveTime + '</td><td>' + d.duration + '</td></tr>' + ht;if (d.siteName === p.siteName) {sn += 1;if(d.type === p.type){tp += 1;tc = d.trainCode === p.trainCode? (tc + 1) : 1;}else {tp = 1;tc = 1;}} else {sn = 1;tp = 1;tc = 1;}}d = dt[0];// 由于循环没有到第一条，所以必须单独补上第一条ht = '<tr><td name="col_1" rowspan="' + sn + '">' + d.siteName + '</td><td name="col_2" rowspan="' + tp + '">' + d.type + '</td>'+ '<td name="col_3" rowspan="' + tc + '">' + d.trainCode + '</td><td>' + d.enterTime + '</td><td>' + d.leaveTime + '</td><td>' + d.duration + '</td></tr>' + ht;ht = '<thead><tr><th>车站名称</th><th>列车类型</th><th>列车名称</th><th>到站时间</th><th>出站时间</th><th>停靠时长</th></tr></thead><tbody>' + ht + '</tbody>';var tbl = document.getElementById('testTable');tbl.innerHTML = ht;//隔行换色var tbl = document.getElementById('testTable'), firstColor = '#def', secondColor = '#fed';for (var i = 1; i < tbl.rows.length; i++) { //遍历Row,零行是标题行，直接跳过tbl.rows[i].style.backgroundColor = (i % 2 === 0) ? firstColor : secondColor;}var cols = document.getElementsByName('col_1');for (var i = 0; i < cols.length; i++) {cols[i].style.backgroundColor = (i % 2 === 1) ? firstColor : secondColor;}cols = document.getElementsByName('col_2');for (var i = 0; i < cols.length; i++) {cols[i].style.backgroundColor = (i % 2 === 1) ? firstColor : secondColor;}cols = document.getElementsByName('col_3');for (var i = 0; i < cols.length; i++) {cols[i].style.backgroundColor = (i % 2 === 1) ? firstColor : secondColor;}
</script>
方式二
实现效果
代码实现
<!DOCTYPE html>
<html>
<head><title>test table</title><style>table,th,thead,tr,td{border: 1px solid black ;}</style>
</head>
<body>
</body>
</html>
<script type="text/javascript">const data = [['Name', 'Year', 'data', 'data', 'value'],['构建期', 2012, 1212, 1300, 29],['构建期', 2013, 154, 154, 29],['运营期', 2014, 154, 154, 484]];function createTable() {const table = document.createElement('table');const thead = document.createElement('thead');const tbody = document.createElement('tbody');for (let i = 0; i < data.length; i++) {const tr = document.createElement('tr');i === 0 ? thead.appendChild(tr) : tbody.appendChild(tr);for (let j = 0; j < data[0].length; j++) {if (i === 0) {const th = document.createElement('th');th.innerText = data[i][j];tr.appendChild(th);} else {const td = document.createElement('td');td.innerText = data[i][j];tr.appendChild(td);}}}table.appendChild(thead);table.appendChild(tbody);document.body.appendChild(table);}// const formatTable = [// [// {// "value": "阶段",// "rowCount": 1,// "colCount": 1// },// {// "value": "年份",// "rowCount": 1,// "colCount": 1// },// {// "value": "投入费用",// "rowCount": 2,// "colCount": 1// },// {// "value": "投入费用",// "rowCount": 0,// "colCount": 1// },// {// "value": "合计",// "rowCount": 1,// "colCount": 1// }// ],// [// {// "value": "构建期",// "rowCount": 1,// "colCount": 2// },// {// "value": 2012,// "rowCount": 1,// "colCount": 1// },// {// "value": 1212,// "rowCount": 1,// "colCount": 1// },// {// "value": 1300,// "rowCount": 1,// "colCount": 1// },// {// "value": 29,// "rowCount": 1,// "colCount": 2// }// ],// [// {// "value": "构建期",// "rowCount": 1,// "colCount": 0// },// {// "value": 2013,// "rowCount": 1,// "colCount": 1// },// {// "value": 154,// "rowCount": 2,// "colCount": 1// },// {// "value": 154,// "rowCount": 0,// "colCount": 1// },// {// "value": 29,// "rowCount": 1,// "colCount": 0// }// ],// [// {// "value": "运营期",// "rowCount": 1,// "colCount": 1// },// {// "value": 2014,// "rowCount": 1,// "colCount": 1// },// {// "value": 154,// "rowCount": 2,// "colCount": 1// },// {// "value": 154,// "rowCount": 0,// "colCount": 1// },// {// "value": 484,// "rowCount": 1,// "colCount": 1// }// ]// ];function formatDataCol(targetCols) {const formatTable = new Array(data.length).fill(0).map(() => new Array(data[0].length).fill(0));for (let j = 0; j < data[0].length; j++) {if (targetCols.indexOf(j) === -1) {for (let i = 0; i < data.length; i++) {formatTable[i][j] = {value: data[i][j],colCount: 1};}} else {let index = 0;let tmp = data[index][j];let colCount = 1;for (let i = 1; i < data.length; i++) {if (data[i][j] === tmp) {colCount++;formatTable[i][j] = {value: data[i][j],colCount: 0};} else {formatTable[index][j] = {value: data[index][j],colCount: colCount,};index = i;tmp = data[index][j];colCount = 1;}}if (index < data.length) {formatTable[index][j] = {value: data[index][j],colCount: colCount,};}}}return formatTable;}function formatDataRow(targetRows) {const formatTable = new Array(data.length).fill(0).map(() => new Array(data[0].length).fill(0));for (let i = 0; i < data.length; i++) {if (targetRows.indexOf(i) === -1) {for (let j = 0; j < data[0].length; j++) {formatTable[i][j] = {value: data[i][j],rowCount: 1};}} else {let index = 0;let tmp = data[i][index];let rowCount = 1;for (let j = 1; j < data[0].length; j++) {if (data[i][j] === tmp) {rowCount++;formatTable[i][j] = {value: data[i][j],rowCount: 0};} else {formatTable[i][index] = {value: data[i][index],rowCount: rowCount,};index = j;tmp = data[i][index];rowCount = 1;}}if (index < data[0].length) {formatTable[i][index] = {value: data[i][index],rowCount: rowCount,};}}}return formatTable;}function mergeFormat(formatCols, formatRows) {const formatTable = new Array(data.length).fill(0).map(() => new Array(data[0].length).fill(0));for (let i = 0; i < data.length; i++) {for (let j = 0; j < data[0].length; j++) {formatTable[i][j] = {value: data[i][j],rowCount: formatRows[i][j].rowCount,colCount: formatCols[i][j].colCount};}}return formatTable;}function createTableByData(targetCols, targetRows) {const formatCols = formatDataCol(targetCols);const formatRows = formatDataRow(targetRows);const data = mergeFormat(formatCols, formatRows);const table = document.createElement('table');const thead = document.createElement('thead');const tbody = document.createElement('tbody');for (let i = 0; i < data.length; i++) {const tr = document.createElement('tr');i === 0 ? thead.appendChild(tr) : tbody.appendChild(tr);for (let j = 0; j < data[0].length; j++) {if (i === 0) {const th = document.createElement('th');if (data[i][j].rowCount === 0) {} else if (data[i][j].rowCount === 1) {th.innerText = data[i][j].value;tr.appendChild(th);} else {th.innerText = data[i][j].value;th.colSpan = data[i][j].rowCount;tr.appendChild(th);}} else {const td = document.createElement('td');if (data[i][j].colCount === 0 || data[i][j].rowCount === 0) {} else if (data[i][j].colCount === 1 && data[i][j].rowCount === 1) {td.innerText = data[i][j].value;tr.appendChild(td);} else if (data[i][j].colCount !== 1 && data[i][j].rowCount !== 1) {td.innerText = data[i][j].value;td.rowSpan = data[i][j].colCount;td.colSpan = data[i][j].rowCount;tr.appendChild(td);} else if (data[i][j].colCount !== 1 && data[i][j].rowCount === 1) {td.innerText = data[i][j].value;td.rowSpan = data[i][j].colCount;tr.appendChild(td);} else if (data[i][j].colCount === 1 && data[i][j].rowCount !== 1) {td.innerText = data[i][j].value;td.colSpan = data[i][j].rowCount;tr.appendChild(td);}}}}table.appendChild(thead);table.appendChild(tbody);document.body.appendChild(table);}createTableByData([0, 4], [0, 1, 2, 3]);
</script>
js基于后台数据实现table行列合并相关推荐
- 进一步封装axios并调用其读取数据（吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持，在这两种情况下的系统只能使用ajax或者原生js请求后台数据）
注意!!!(修改于2020年7月18日) 在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据 报错截图如下 报错内容: {&quo ...
- sd.js帮助您简化繁重的获取数据、存储数据（CRUD）骚操作（吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持，在这两种情况下的系统只能使用ajax或者原生js请求后台数据）
原生sd.js---------------------------------------------------------------- const API_ROOT_URL = "h ...
- html5表格两列合并_详解html中表格table的行列合并问题解决
这篇文章主要介绍了详解html中表格table的行列合并问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 因为要做个网站, ...
- vue绑定后台数据ajax,vueJS 获取后台数据 绑定data
//vue 环境安装 http://blog.csdn.net/u013182762/article/details/53021374 一开始使用安装环境配置一些东西 ,后来发现太麻烦了 . 直接C ...
- js 动态生成html（js根据后台返回数据生成html页面中的table标签）（转义字符）
js 动态生成html table标签中内容js生成 html代码 js代码 js 动态生成html 触发事件传参字符转义 table标签中内容js生成 html代码 <div><t ...
- 基于layui中table组件的数据表格单元格合并
layui.use(['table'], function () {var $ = layui.$, table = layui.table;var mergeColumns=['province', ...
- 基于vue 通过数据过滤 实现表格合并
基于vue 通过数据过滤 实现表格合并 需求 基于vue渲染的数据表格 需要对相同的列进行合并 思路 自从使用了vue,就再也不想直接操作dom节点了,所以还是对数据操作. 要合并单元格需要用到row ...
- ant-design中对单个或多个table列表数据进行动态列合并
文章目录 一. 实现效果 二. 实现方法 2.1 版本:ant-design-vue:"^2.1.2" 2.2 方法:a-table组件里面的customCell功能 2.3 注意 ...
- 干货|6个牛逼的基于Vue.js的后台控制面板，接私活必备
JavaEE擅长的就是企业级应用,作为一个Java程序员,如果想自己徒手撸一个ERP.WMS之类的系统还是有一点挑战的,不过今天松哥要给大家介绍几款牛逼的基于Vue.js的后台管理控制面板,掌握这几款 ...
- json vue 对象转数组_vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
本文实例讲述了vue.js基于v-for实现批量渲染 json数组对象列表数据.分享给大家供大家参考,具体如下: vuejs的出现减轻了对dom的直接操作,同时它提供的 v-for 渲染列表数据也给我 ...
最新文章
- 自主研发：3通道1GS/s FPGA+DSP板
- Android -- ViewPager切换动画，PageTransformer
- shell脚本编程for循环求阶乘_shell脚本编程(完结版).pdf
- java jls8_GitHub - scmod/jls8
- 半年时间能学会php吗_4个月真的能学会PHP吗
- c++ socket学习（1.4）
- SpringBoot部署项目到Docker仓库
- （BFS+hash去重）八数码问题
- ext.net 开发学习之复杂模板板块 （叁）
- IE 首页被改为www.1188.com的恢复办法
- odoo10参考系列--网络控制器（Web Controllers）
- NYOJ_23_取石子（一）
- Linux 端口占用情况查看
- 利用辗转相除法求两个数的最大公约数
- linux路由表的查看和含义
- 利润百倍的暴利行业？
- ThinkPHP5框架下载安装
- ulipad.4.1.zip linux,Ubuntu 12.04下Ulipad的安装
- linux中vim命令详解（操作大全）
- ERROR: HHH000388: Unsuccessful: create table