使用js多级次合并单元格

最新推荐文章于 2023-06-06 16:40:09 发布
最新推荐文章于 2023-06-06 16:40:09 发布
阅读量2.9k 收藏 4
点赞数
分类专栏： JavaScript JavaWeb 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Galeno1994/article/details/73800955
版权 
<!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"> 
   <tbody>
    <tr> 
     <th>c1</th> 
     <th>c2</th> 
     <th>c3</th> 
     <th>c4</th> 
     <th>c5</th> 
     <th>c6</th> 
    </tr> 
    <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>3</td> 
     <td>4</td> 
     <td>5</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>a</td> 
     <td>2</td> 
     <td>4</td> 
     <td>5</td> 
     <td>6</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> 
   </tbody>
  </table>
  <br /> 合并后：
  <br /> 
  <table width="400" border="1" id="table1"> 
   <tbody>
    <tr> 
     <th>c1</th> 
     <th>c2</th> 
     <th>c3</th> 
     <th>c4</th> 
     <th>c5</th> 
     <th>c6</th> 
    </tr> 
    <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>3</td> 
     <td>4</td> 
     <td>5</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>a</td> 
     <td>2</td> 
     <td>4</td> 
     <td>5</td> 
     <td>6</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> 
   </tbody>
  </table>   
  <script type="text/javascript"> 
	//多级次动态合并表格行
	function checkArray(arr1,arr2){
		for (var i = 0; i < arr1.length; i++) {
			if (arr1[i].innerText===arr2[i].innerText) {

			 }else{
					  return false;
			}
		}
		 return true;
	}
	function dynamicMergeTableRow(tableId){
		  var tb = document.getElementById(tableId);
		  var obj1;
		  var obj2;
		  var objtemp1 = [];
		  var objtemp2 = [];
		  var rowCount = tb.rows.length;
		  console.info(rowCount);
		  var colCount = tb.rows[0].cells.length;
		  console.info(rowCount);
		  var colLength = 4;

		  //命名(表头除外)
		  for (var i = 1; i < rowCount; i++) {
			for (var j = 0; j < colCount; j++) {
			  tb.rows[i].cells[j].id = "tb_" + i.toString() + "_" + j.toString();
			}
		  }

		  //从后往前检查，进行逐列检查合并,开始列为colLength-1
		  for (var col = colLength -1; col >= 0; col--) {
			 //当col>0时有前方的单元格 
			 if (col > 0) {
				//objtemp1为obj1左侧所有单元格集合，初始objtemp1及obj1均从第二行开始(tb_1_)
				for (var l = 0; l < col; l++) {
				   objtemp1[l] = document.getElementById("tb_1_" + l.toString());
				}
			 }
			 obj1 = document.getElementById("tb_1_" + col.toString());

			 //obj2为obj1下方单元格,obj1从第二行开始，则obj2从第三行开始，遍历以row=2为起始值
			 for (var row = 2; row < rowCount; row++) {
					//同obj1及objtemp1，col>0：即有前方单元格，此时有objtemp2
					if (col > 0) {
						for (var l = 0; l < col; l++) {
						   objtemp2[l] = document.getElementById("tb_" + row.toString() +"_"+ l.toString());
						}
					}
					obj2 = document.getElementById("tb_" + row.toString() +"_"+ col.toString());

					//定义完obj1/obj2/objtemp1/objtemp2后，开始合并
					//第一层判断：当obj1的值等于obj2时，即同一列的相邻单元格值相同
					if (obj1.innerText == obj2.innerText) {
						//第二层判断：obj1/obj2所在列前方还有其他列：即col>0(此步判断为单元格合并的依赖性提供支持)
						if (col > 0) {
							//第三层判断：obj1/obj2所在列前方还有其他列，且objtemp1,objtemp2值完全相同，可以合并
							if (checkArray(objtemp1,objtemp2)) {
								obj1.rowSpan++;
								obj2.parentNode.removeChild(obj2);
							}
							//第三层判断：obj1/obj2所在列前方还有其他列，且objtemp1,objtemp2值不同，不可合并，并重新对obj1/objtemp1赋值，令其等于原来的obj2/objtemp2          
							else{
								obj1 = document.getElementById("tb_" + row.toString() +"_"+ col.toString());
								for (var l = 0; l < col; l++) {
									objtemp1[l] = document.getElementById("tb_" + row.toString() +"_"+ l.toString());
								}                  
							}
						}
						//第二层判断：obj1/obj2所在列为首列，直接合并
						else{
							obj1.rowSpan++;
							obj2.parentNode.removeChild(obj2);
						}
					}
					//第一层判断：当obj1的值不等于obj2时，即同一列的相邻单元格值不相，此时重新对obj1/objtemp1赋值，令其等于原来的obj2/objtemp2
					else{
						obj1 = document.getElementById("tb_" + row.toString() +"_"+ col.toString());
						for (var l = 0; l < col; l++) {
							objtemp1[l] = document.getElementById("tb_" + row.toString() +"_"+ l.toString());
						}       
					}
			 }
			 objtemp1 = [];
			 objtemp2 = [];
		  }
	}
	dynamicMergeTableRow('table1');
 </script> 
 </body>
</html>

zwbonline1112
关注
专栏目录
java js合并_JS合并单元格
weixin_32791013的博客
02-19 428
在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代表合并所有行...
Eement UI 中 Table 表格 多级合并单元格方式
HVENLY的博客
09-17 430
最近遇到一个需求，需要实现多级合并单元格，在此记录一下。 1.需求 需要得到如下所示的表格： 后端给的数据如下： tableData6: [ { id: "1", config_name: "配置名称", name: "商品名称1", config_id: "配置id", project_id: "一级项目id1", project_name: "一级项目名称", .
jquery.table.rowspan.js 表格自动合并单元格插件
04-15
日常开发中，经常遇到表格里需要自动合并单元格，考虑到写服务器控件比较消耗性能，因些还是把这种工作交给客户端Javascript去做吧，基于习惯用jquery框架，所以封装了一个Jquery插件。
js table 单元格合并
xingjianxinn的专栏
02-20 1278
下面第二张图是正常的效果，现在当公共交通一月份和二月份都有值的时候，需要合并单元格，具体代码如下： 照片月统计管理 .sort{color:#0663A2;cursor:pointer;} $(document).ready(function(){ var arr2=[['1','1月'],['2','2月'],['3','3月'],['4','4月'],['5',
JS合并TABLE单元格
Abracadabra__的博客
12-26 1446
1.函数功能描述 根据table第一列的值进行合并：将相邻的有相同值的单元格进行合并 2.效果 3.JS代码 &amp;lt;script type=&quot;text/javascript&quot;&amp;gt; mc('dataTable1',0,0,0); //合并单元格 //table1:代表table的id值 //startRow:列的开始行 //endRow:列的结束行 //col:列号 合并相同...
js实现 table合并单元格
geniusbluesky的博客
11-12 1726
** table合并单元格 function uniteTdCells(tableId){ var table = document.getElementById(tableId); for (let i = 0; i < table.rows.length; i++) { for (let c = 0; c < table.rows[i].cells.length; c++) { if (c == 0 || c == 1 || c == 2 || c == 3)
使用xlsx-js-style表格导出，合计，单元格居中，多级表头合并，添加序号
最新发布
m0_67372185的博客
06-06 2633
使用xlsx-js-style表格导出，合计，单元格居中，多级表头合并，添加序号
jQuery合并单元格
09-02
在实际项目中，可能会遇到更复杂的情况，如动态合并、多级合并等。这时可能需要对表格进行更复杂的操作，甚至可能需要借助额外的库，如DataTables或Handsontable，它们提供了更丰富的表格功能和API。 总之，jQuery...
vue+elementUI实现动态表格合并单元格.zip
09-26
在本项目中，"vue+elementUI实现动态表格合并单元格.zip" 提供了一个使用 Vue.js 框架和 Element UI 组件库构建的动态表格应用。Vue.js 是一款轻量级的前端JavaScript框架，它提供了响应式的数据绑定和组件化功能，...
js 合并单元格2例
10-06
3. 多级标题：在创建带有子标题的复杂表格时，可以使用合并单元格来创建层次感。 总结，js合并单元格主要通过设置`colspan`和`rowspan`属性实现，而实际操作中，我们还需要结合JavaScript的DOM操作能力来满足动态...
javascript 万能table合并单元格 js版
05-06
只要输入table的id，就可以自动合并单元格，只要上下相邻的单元格相同的，都会合并 html版比较好，点下面的 http://download.csdn.net/source/1276574
JS TABLE CELL 相同内容 单元格 合并
11-14
Table前端同一列里面内容相同的单元格合并，网上找的存在如下问题： 1、大部分只能合并某一列，不能多列； 2、有些能合并多列的，首列合并后，第二列合并单元格行数不能超过首列合并的单元格行数，虽然第二列值可能相同的行数更多。例如： 首列 第二列 a b c b c b 总之很不满意，花了一晚上时间写了一下，希望能解决大部分类似问题。
完美的table单元格合并js
11-24
本js脚本完美的实现了table单元格的合并，合并后犹如交叉表的形式，非常完美，并在其中附带例子可以验证。
js 实现 动态生成包含合并单元格的表格
03-31
js 实现 动态生成包含合并单元格的表格! 值得下载看看!资源免费,大家分享!!
JS 合并表格
qq_41834408的博客
12-12 1768
【代码】JS 合并表格。
JavaScript 合并 Table 单元格简单做
zhangxin09的专栏
05-14 5465
标签初步分析 HTML Table 元素允许合并单元格。通常手写代码比较“反人类”思维，于是还是通过直观的可视化的工具来完成，例如奉为经典的 Dreamweaver。 研究代码，td 行元素有一 rowspan 跨行的属性，表示跨行行数。如果当前这样有 x 个跨行，那么下面 tr > td （一共 x 行）中的每一行都可以少出现一个 td。 如上图，上面有 rowspan 的 tr 的，...
js合并table单元格
caihuihai的博客
03-18 100
mc('qyTable',0,0,0);  //直接调用      /**           * java合并单元格           * @param tableId           * @param startRow           * @param endRow           * @param col           */          function m...
elementui多级表头合并合并第3行第1列和第2列表头
06-02
您可以使用 ElementUI 的表格组件中的 `span-method` 属性来合并多级表头。具体地，您需要定义一个方法来返回某个单元格需要跨越多少行或多少列，然后将该方法赋值给 `span-method` 属性即可。 以下是一个示例代码，可以实现合并第三行第一列和第二列表头： ```html <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名" rowspan="3"></el-table-column> <el-table-column label="地址" colspan="2"></el-table-column> <el-table-column label="其他" colspan="3"></el-table-column> </el-table> ``` ```javascript export default { data() { return { tableData: [ { name: '张三', address: '北京', other: '...' }, { name: '李四', address: '上海', other: '...' }, { name: '王五', address: '广州', other: '...' } ] } }, methods: { // 定义合并单元格的方法 mergeCell(rowIndex, columnIndex) { if (rowIndex === 2 && columnIndex === 0) { return { rowspan: 2, colspan: 1 } } else if (rowIndex === 1 && columnIndex === 1) { return { rowspan: 2, colspan: 1 } } } } } ``` 在上面的代码中，我们定义了一个 `mergeCell` 方法来判断某个单元格是否需要合并。具体地，我们判断如果该单元格在第三行第一列或者第二行第二列，就需要跨越两行或两列。 接下来，我们将该方法赋值给表格组件的 `span-method` 属性： ```html <el-table :data="tableData" style="width: 100%" :span-method="mergeCell"> <!-- ... --> </el-table> ``` 这样，就可以实现第三行第一列和第二列表头的合并了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值