js 合并单元格

最新推荐文章于 2023-09-01 00:46:01 发布
最新推荐文章于 2023-09-01 00:46:01 发布
阅读量715 收藏
点赞数
分类专栏： 学习
<!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
关注
专栏目录
java js合并_JS合并单元格
weixin_32791013的博客
02-19 454
在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代表合并所有行...
html js 合并单元格合并单元格,纯前端利用 js-xlsx 之合并单元格(3)
weixin_42113552的博客
06-15 713
前言 前两篇文章主要基本导入导出和导出不同格式文件,这次是因为有小伙伴问我怎么合并单元格。其实吧很多东西官网https://github.com/SheetJS/js-xlsx讲的比我清楚多了,不过既然问了我也就讲一下吧!!其他文章传送门:1.导入数据观察数据格式1.1.我们先创建一个具有合并单元格的xlsx表格就以表头数据合并示例吧:示例1.2.写个简单的数据导入功能(你可以参考前言中的文章编...
js合并单元格
对雪书空武
10-26 325
&#13; uniteTable(tb,colLength){ document.getElmentById('mytable').style.display='block'; var i = 0; var j=0; var rowCount = tb.rows.length;//行数 var colCount = tb.rows[0].cells.leng...
JS合并单元格
夜颇黎
03-19 1064
这个函数拿去可以直接使用，旨在合并上下单元格值相同的情况。如下图效果： 注释我都写了，相比你能看的懂的，或许和你的要求不一，但你可以在这基础上来做修改便是。 function rowSpan(){  //得到table对象  var tab = document.getElementById("tab");  if(!tab){   return;  }  //从第二行开始，排
js合并单元格 相同内容的单元格合并
02-08
在JavaScript编程中，合并单元格是一项常见的需求，特别是在处理HTML表格时。这通常涉及到优化数据展示，例如在报告或统计中避免重复信息占用过多空间。本文将深入探讨如何使用JavaScript来实现相同内容的单元格合并...
JS合并单元格、JavaScript单元格合并
wangxiaohigh
11-09 585
&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt; &lt;title&gt;合并表格&lt;/title&gt; &lt;script&gt; /////////////////////////
JavaScript合并单元格
lotf1681的专栏
03-10 2877
function SpanGrid(tabObj,colIndex){ if(tabObj != null) {  var i,j;  var intSpan;  var strTemp;  for(i = 0; i   {   intSpan = 1;   strTemp = tabObj.rows[i].cells[colIndex].innerText;   for(j = i + 1; j
JS合并单元格。
79bo的专栏
06-02 3428
                         A             1                                 A             2                                 B             1                                 B             1                
使用JS合并单元格
欧程部落
07-04 2413
使用JS合并单元格    表格中经常会有不规则的表格出现，收集了点网上写的合并单元格的js代码，感觉可以扩展，于是就试着扩展了一下， 不过只能合并表格中的数据时有规律的数据，不能进行任意合并。    下面是些写的脚本代码     Js代码    ///////////////////////////////////////////////
javascript合并单元格
11-26
### JavaScript 合并单元格详解 #### 一、概述 在网页开发中，表格是一种非常常见的数据展示形式。为了使表格中的数据呈现更加美观、合理，我们常常需要对某些单元格进行合并操作。本篇文章将重点介绍如何使用...
ExcelJS 合并表头,合并单元格,一sheet多表格
liurui0204的博客
08-21 3521
【代码】ExcelJS 合并表头,合并单元格,一sheet多表格。
JavaScript合并单元格格
Zgke
08-13 1775
<br />使用方法 例如我们要合并 第1列 第2列 第4列  第14列 第15列   建一个数组  并且根据ID找到TABLE 把这段代码放到TABLE后面就可以了<br /> <br /><SCRIPT language="javascript" > var columnlist =new Array(); columnlist.push(0); columnlist.push(1); columnlist.push(2); columnlist.push(3); columnlist.pu
JS合并相同单元格
最新发布
轻风细雨_林木木
09-01 825
参考：https://blog.csdn.net/Jioho_chen/article/details/84593753。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值