js 合并单元格

最新推荐文章于 2023-08-21 17:30:41 发布
最新推荐文章于 2023-08-21 17:30:41 发布
阅读量685 收藏
点赞数
分类专栏： 学习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>表格相同内容合并</title>  
</head>  
   
<body>  
合并前：  
<table width="400" border="1">  
  <tr>  
    <td>a</td>  
    <td>1</td>  
    <td>2</td>  
    <td>3</td>  
    <td>4</td>  
    <td>5</td>  
  </tr>  
  <tr>  
    <td>a</td>  
    <td>1</td>  
    <td>2</td>  
    <td>3</td>  
    <td>4</td>  
    <td>6</td>  
  </tr>  
  <tr>  
    <td>a</td>  
    <td>2</td>  
    <td>3</td>  
    <td>3</td>  
    <td>4</td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td>b</td>  
    <td>3</td>  
    <td>4</td>  
    <td>6</td>  
    <td>7</td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td>b</td>  
    <td>3</td>  
    <td>5</td>  
    <td>6</td>  
    <td>7</td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td>cc</td>  
    <td>2</td>  
    <td>3</td>  
    <td>4</td>  
    <td>5</td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td>cc</td>  
    <td>2</td>  
    <td>3</td>  
    <td>5</td>  
    <td>5</td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td>d</td>  
    <td>1</td>  
    <td>2</td>  
    <td>3</td>  
    <td>4</td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td>e</td>  
    <td>1</td>  
    <td>2</td>  
    <td>3</td>  
    <td>4</td>  
    <td> </td>  
  </tr>  
</table><br />  
合并后：<br />  
<table width="400" border="1" id="table1">  
  <tr>  
    <td>a</td>  
    <td>1</td>  
    <td>2</td>  
    <td>3</td>  
    <td>4</td>  
    <td>5</td>  
  </tr>  
  <tr>  
    <td>a</td>  
    <td>1</td>  
    <td>2</td>  
    <td>3</td>  
    <td>4</td>  
    <td>6</td>  
  </tr>  
  <tr>  
    <td>a</td>  
    <td>2</td>  
    <td>3</td>  
    <td>3</td>  
    <td>4</td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td>b</td>  
    <td>3</td>  
    <td>4</td>  
    <td>6</td>  
    <td>7</td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td>b</td>  
    <td>3</td>  
    <td>5</td>  
    <td>6</td>  
    <td>7</td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td>cc</td>  
    <td>2</td>  
    <td>3</td>  
    <td>4</td>  
    <td>5</td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td>cc</td>  
    <td>2</td>  
    <td>3</td>  
    <td>5</td>  
    <td>5</td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td>d</td>  
    <td>1</td>  
    <td>2</td>  
    <td>3</td>  
    <td>4</td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td>e</td>  
    <td>1</td>  
    <td>2</td>  
    <td>3</td>  
    <td>4</td>  
    <td> </td>  
  </tr>  
</table>  
</body>
<script type="text/javascript">  
    ///合并表格相同行的内容  
    ///tableId：表格ID（最好是tbody，避免把表尾给合并了)  
    ///startRow：起始行，没有标题就从0开始  
    ///endRow：终止行，此参数是递归时检查的范围，一开始时会自动赋值为最后一行  
    ///col：当前处理的列  
    function MergeCell(tableId, startRow, endRow, col) {  
        var tb = document.getElementById(tableId);  
        if (col >= tb.rows[0].cells.length) {  
            return;  
        }  
        //当检查第0列时检查所有行  
        if (col == 0 || endRow == 0) {  
            endRow = tb.rows.length - 1;  
        }  
        for (var i = startRow; i < endRow; i++) {  
            //程序是自左向右合并  
            if (tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[col].innerHTML) {  
                //如果相同则删除下一行的第0列单元格  
                tb.rows[i + 1].cells[col].style.display='none';  
                //更新rowSpan属性  
                tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan | 0) + 1;  
                //当循环到终止行前一行并且起始行和终止行不相同时递归(因为上面的代码已经检查了i+1行，所以此处只到endRow-1)  
                if (i == endRow - 1 && startRow != endRow) {  
                    MergeCell(tableId, startRow, endRow, col + 1);  
                }  
            } else {  
                //起始行，终止行不变，检查下一列  
                MergeCell(tableId, startRow, i, col + 1);  
                //增加起始行  
                startRow = i + 1;  
            }  
        }  
    }  
    MergeCell('table1', 0, 0, 0);  
</script>  


</html>
MJ_RJ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js合并单元格
dlbyysd的博客
07-12 1936
原生js简单封装合并单元格
el-table 指定表格合并行与单元格，以及表头合并单元格
最新发布
m0_63026408的博客
02-28 954
【代码】【无标题】
java js合并_JS合并单元格
weixin_32791013的博客
02-19 391
在Web中经常需要合并单元格，例如对于下面一个表格:table,table tr th,table tr td {border: 1px solid #0094ff;}表头1表头2表头3表头4列1列2列3列4列1列2列3列4列1列2列3列4表格原来样式:合并的JS方法:(可以作为一个工具方法)1、纵向合并，也就是对同一列的相邻行单元格相同的进行合并/*** 合并单元格(如果结束行传0代表合并所有行...
js实现自定义合并单元格，el-table开箱即用
sssdal19995的博客
04-02 2559
分享一个简单易用的计算表格内单元格合并的工具，支持行合并、列合并等常见场景
js 自定义表格的合并单元格、插入行列、删除行列
我见青山多妩媚,料青山见我应如是
09-09 2584
js 自定义表格的合并单元格、插入行列、删除行列
js合并单元格 相同内容的单元格合并
02-08
demo实例 合并紧挨着的 单元格 通过js实现 希望对大家有帮助
javascript合并单元格
11-26
js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格
jquery datatable 单元格合并
04-26
jquery datatable 单元格合并，通过js实现相同内容单元格动态合并！！！jquery datatable 单元格合并，通过js实现相同内容单元格动态合并！！！
js合并单元格
07-05
在列表页需要对相同数据进行单元格合并的情况！
JavaScript合并单元格【解决只能根据单列进行合并的问题】
leader_li的博客
03-09 1103
该合并单元格的方法无法整齐的规划表格。由于每列只能根据该列的重复值进行合并，看着比较混乱。需要根据其他列进行分割合并。
JS实现合并单元格的两种方法
qq_45241359的博客
04-05 6587
本后端菜狗想在网上找合并单元格的代码，结果找到的都是太老的代码，然后就只能用Js手写了两种方法（第二种方法叫了个前端大佬写的） 废话不多说，直接上代码： （由于时间有点小久，就不写思路和过程啦） 第一种方法： 1.使用map扫描一遍表格，统计相同的信息数量（需要合并的个数），并标记每个重复的第一个元素 2.利用queue队列再扫描一遍表格，将不是第一个元素放入其中，最后讲队列元素全部出栈并删除元素。（这里不能用array数组存储删除的元素，因为删除会导致引用的下标不对） 3.扫描一遍表格，将第一个元素合并
js实现表格动态合并
weixin_52776724的博客
03-09 1674
【代码】js实现表格动态合并。
JS前端合并单元格
前路漫漫，少年，继续披荆斩棘！
01-05 606
JS前端合并单元格
js 实现表格合并单元格
qq_35469137的博客
04-15 2837
需求 实现下面的表格效果 代码： //利用去重原理 function table(dom) { var arr = []; var f= document.getElementsByClassName(dom); for (let i = 0; i < f.length; i++) { if (arr.indexOf(f[i].innerHTML) == -1) { arr.push(f[i].innerHTML); var.
【岁月留声（Javascript）】动态合并table单元格
热门推荐
Kida 的技术小屋（CSDN 版）
05-11 1万+
废话不说直接上代码
ExcelJS 合并表头,合并单元格,一sheet多表格
liurui0204的博客
08-21 2050
【代码】ExcelJS 合并表头,合并单元格,一sheet多表格。
【js】动态合并表格
hateson的专栏
10-14 1023
//动态合并表格 //传入参数：tableObj(表格ID); //childNodeIndexs:需要合并的列索引可传多列索引用逗号分割如：（‘0，1，2’表示合并表格的一二三列数据，注意传入索引时必须按照 从前往后的顺序） function setRowSpan(table
SpreadJs合并单元格判断
05-27
在SpreadJS中，可以使用 isSpan 方法来判断指定的单元格是否是合并单元格。具体的用法如下： ```javascript var sheet = spread.getActiveSheet(); var row = 1, col = 1; var isSpan = sheet.isSpan(row, col); if...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值