js动态的合并table的单元格

最新推荐文章于 2024-05-16 12:43:50 发布
最新推荐文章于 2024-05-16 12:43:50 发布
阅读量8k 收藏 2
点赞数
分类专栏： js 文章标签： javascript 合并 
<!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>

原文章：
http://blog.csdn.net/galeno1994/article/details/73800955

益达还有么
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript动态合并table单元格
lyqin2008的专栏
08-28 1580
动态合并的js代码如下： window.onload = function(){ var table=document.getElementById("table1"); var rows=table.rows; var dwryxj=dwgbxj=""; var count=1; for(var i=1;i1){//合并 var start=i-count; //alert(start); rows[start].cells[4].rowSpan=
jxls动态合并单元格
weixin_33948416的博客
04-28 4629
2019独角兽企业重金招聘Python工程师标准>>> ...
js动态合并单元格
weixin_45411740的博客
07-16 1806
前几天做网页的时候涉及到动态合并单元格的问题，经过一番努力终于是做好了，所以现在把代 码贴出来。 首先说一下我们要实现的效果原图是这样的 然后我们要实现的效果是这样的 而且呢表格的生成是发送ajax请求后后端传过来的数据通过for循环动态生成的，下面贴代 html代码如下 <thead> <tr> <th>站点</th> <th>车道</th> <th>时间&l...
Javascript 动态合并table单元格
fxxashelly的博客
07-10 2021
原博客地址：https://blog.csdn.net/kida_yuan/article/details/51371487直接保存html浏览器打开看效果，谢谢原博主提供，转载方便自己以后参考&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...
vue3 + antd-vue@4 a-table单元格合并，rowSpan（行合并），colSpan（列合并）详解, 表头合并详解， 表头自定义详解
最新发布
都已经是第二年的立春、又何必执着于、当年的盛​夏呢？
05-16 1921
根据需求， 就应该需要就可以得到，字段 vlan值、vlan平面、确认状态三个字段（三列）的第1行第2行需要合并在一起， 第4行-第6行需要合并，（所以就需要从这三个字段的 customCell 入手） 实现代码如下，(因为只是行合并就只需要操作rowSpan即可)解释一下， 其实后端给的数据时这样的， 两个vlan信息，每个vlan信息下面都有自己的设备列表， 因此需要我们自己把设备列表提出来，实现满足table的格式，这个时候就需要使用列合并rowSpan,将第1个字段的第一行到第3行合并，代码如下。
【岁月留声（Javascript）】动态合并table单元格
热门推荐
Kida 的技术小屋（CSDN 版）
05-11 1万+
废话不说直接上代码
js实现表格动态合并
weixin_52776724的博客
03-09 1742
【代码】js实现表格动态合并。
table根据相同内容动态合并单元格
cyx924的博客
09-08 1327
4、最开始的时候在网上找了很多种方法，都涉及到用var tb= document.getElementId('tb)来获取table数据，但是尝试了多种方法都无法获得tb.rows的数据，因此放弃用获取ID的方式。本篇中记录的方式是亲测有用的。
JS实现动态修改table及合并单元格的方法示例
10-20
在JavaScript中，动态修改表格（Table）以及合并单元格是常见的需求，特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先，要动态修改表格，我们需要获取表格元素。在HTML中，表格...
完美的table单元格合并js
11-24
本js脚本完美的实现了table单元格的合并，合并后犹如交叉表的形式，非常完美，并在其中附带例子可以验证。
vue-easytable合并单元格
05-18
在这个“vue-easytable合并单元格”的主题下，我们将深入探讨如何利用Vue Easytable实现表格中的单元格合并。 在传统的HTML表格中，合并单元格通常使用`<td>`的`colspan`和`rowspan`属性来完成，但在Vue Easytable...
js 实现 动态生成包含合并单元格的表格
03-31
js 实现 动态生成包含合并单元格的表格! 值得下载看看!资源免费,大家分享!!
利用js合并table相同内容单元格并js方式自动生成
11-15
利用js合并table相同内容单元格并js方式自动生成，把文本内容复制进js中，应该就知道大概咋用了
js动态表格合并拆分行
10-15
一个js例子实现了表格的动态合并，拆分单元格
layui table合并单元格.zip
01-06
在layui中，我们可以利用表格的`render`方法渲染数据，并通过JavaScript逻辑判断哪些单元格需要合并。通常，这涉及到对数据源的分析，找出需要合并的行或列。例如，如果连续几行有相同的数据，那么它们对应的单元格...
前端笔记：JS动态合并单元格
影子的博客
02-12 1689
/** 动态合并单元格 tableId:表格ID colLength：循环检查前多少列单元格 */ function uniteTable(tableId, colLength) {//表格ID，表格列数 var tb=document.getElementById(tableId); tb.style.display=''; var i ...
多级次动态合并表格行
xyr05288的专栏
09-08 1489
转自https://segmentfault.com/q/1010000004408330?_ea=597922//多级次动态合并表格行 function checkArray(arr1,arr2){ for (var i = 0; i < arr1.length; i++) { if (arr1[i].innerText===arr2[i].innerText) {
js动态添加td,tr
zhanshuai123的博客
08-24 2744
//新增机器人信息的 function insertRows(rr){ //var tab=document.getElementById('tableid'); var tb1 = $(&quot;#tableid&quot;); var tempRow=parseInt($(&quot;#tableid tr&quot;).size()); v...
BOOTstrap table动态合并居中单元格
06-09
要实现动态合并居中单元格，可以使用 Bootstrap Table 的自定义列插件。具体步骤如下： 1. 定义自定义列插件，实现合并单元格和居中文本的功能。示例代码如下： ```javascript $.fn.bootstrapTable.columnDefaults...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值