Js 合并 table 行 的实现方法

Js 合并 table 行 的实现方法

需求如下:

 

某公司的员工档案，如下,  经理看员工的信息不是很清晰:

 

姓名

所在学校

毕业时间

张三

小学

2000

张三

中学

2006

张三

大学

2010

李四

小学

2000

李四

中学

2006

王五

小学

2006

 

所以要求要求姓名一列如果发现挨着的名字相同的话,将其合并为一行,如下图所示:

 

姓名

所在学校

毕业时间

 

张三

小学

2000

中学

2006

大学

2010

 

李四

小学

2000

中学

2006

王五

小学

2006

这样看起来是不是很清晰... 

解决思路

1.         首先我想封装一个方法,这个方法应该是:

a)         操作哪一个table

b)         这个table的列(要合并的列)

c)         从第几行开始合并(如:表头行不参与合并),

d)         结束到第几行(如:分页行不参与合并)

2.         具体内部方法的实现

a)         我想先用一个集合来存储相同的名称的个数(如:[3,2,1] 也就是 [张三的个数,李四的个数,王五的个数])

b)         然后循环table的行数,如果 数组中的数大于1,我要将大于1的td给删掉。

3.         在循环的同时添加条件。

 

以上就是我要解决这个问题的主要思路.那大家就先看看我的具体代码吧:

[javascript] view plaincopy
  1. /** 
  2.  
  3. data格式{'table':$('tableId'),'columnId':'0','startRowNumber':'1','endRowNumber':} 
  4.  
  5. */  
  6.   
  7. function initRowsPan(data) {  
  8.   
  9.    //判断table是否存在  
  10.   
  11.    if(!data.table)  
  12.   
  13.    {  
  14.   
  15.        return;  
  16.   
  17.    }  
  18.   
  19.    //判断是否存在操作的列编号  
  20.   
  21.    if(!data.columnId||data.columnId<0)  
  22.   
  23.    {  
  24.   
  25.        return;  
  26.   
  27.    }  
  28.   
  29.    //记录开始的行号,如果为空,则默认从第0行开始  
  30.   
  31.    var tStartNumber=data.startRowNumber;  
  32.   
  33.    if(!tStartNumber||tStartNumber<0)  
  34.   
  35.    {  
  36.   
  37.        tStartNumber=0;  
  38.   
  39.    }  
  40.   
  41.    //记录table的所有hang集合  
  42.   
  43.    var tableRows = data.table.rows;  
  44.   
  45.    //记录结束的行号,如果为空,则默认为table的行号  
  46.   
  47.    var tEndNumber=data.endRowNumber;  
  48.   
  49.    if(!tEndNumber||tEndNumber<=0)  
  50.   
  51.    {  
  52.   
  53.        tEndNumber=tableRows.length;  
  54.   
  55.    }  
  56.   
  57.    else  
  58.   
  59.    {  
  60.   
  61.        //给传来的编号加1,因为表格的行编号是从0开始.  
  62.   
  63.        tEndNumber+=1;  
  64.   
  65.    }  
  66.   
  67.   
  68.   
  69.    //得到相同内容的行数的集合  
  70.   
  71.    var totalcount = new Array();  
  72.   
  73.    //临时变量,循环记录表格中td的内容,用来判断td中的value是否发生修改  
  74.   
  75.    var tTdValue = "";   
  76.   
  77.    //临时变量,再循环时,如果td的值相同,那么变量加1, 否则将临时变量压入集合中  
  78.   
  79.    var tRowsCount = 1;  
  80.   
  81.    //存储table 的所有行数  
  82.   
  83.      
  84.   
  85.    for ( var i = data.startRowNumber; i < tEndNumber; i++)   
  86.   
  87.    {  
  88.   
  89.        //首先拿出来td的值  
  90.   
  91.        var tTdInner=tableRows[i].cells[data.columnId].innerHTML.trim();  
  92.   
  93.        //如果是第一次走循环,直接continue;  
  94.   
  95.        if (i == data.startRowNumber)  
  96.   
  97.        {  
  98.   
  99.           tTdValue = tTdInner;  
  100.   
  101.           continue;  
  102.   
  103.        }  
  104.   
  105.        //如果当前拿出来的值和出处的值相同,那么将临时数量加1  
  106.   
  107.        if (tTdValue == tTdInner)   
  108.   
  109.        {  
  110.   
  111.           tRowsCount++;  
  112.   
  113.        }  
  114.   
  115.         else   
  116.   
  117.        {  
  118.   
  119.           //否则添加到集合里面  
  120.   
  121.           totalcount.push(tRowsCount);  
  122.   
  123.           //并且将当前的td中的value赋给变量  
  124.   
  125.           tTdValue = tTdInner;  
  126.   
  127.           //数量清为1  
  128.   
  129.           tRowsCount = 1;  
  130.   
  131.        }  
  132.   
  133.        //判断是否是循环的最后一次,如果是最后一次那个直接将当前的数量存储到集合里面  
  134.   
  135.        if (i == tEndNumber -1)   
  136.   
  137.        {  
  138.   
  139.           totalcount.push(tRowsCount);  
  140.   
  141.        }  
  142.   
  143.    }  
  144.   
  145.      
  146.   
  147.    //临时变量,再循环中判断是否和数组中的一项值相同  
  148.   
  149.    var tNum = 0;  
  150.   
  151.    //注意这个循环是倒着来的  
  152.   
  153.    for (var i = tEndNumber - 1; i >= data.startRowNumber; i--)   
  154.   
  155.    {  
  156.   
  157.        //临时变量,存储td  
  158.   
  159.        var tTd=tableRows[i].cells[data.columnId];  
  160.   
  161.        tNum++;  
  162.   
  163.        //如果发现tNum和数组中最后一个值相同,那么就可以断定相同的td已经结束[只是其中一个]  
  164.   
  165.        if (tNum == totalcount[totalcount.length - 1])   
  166.   
  167.        {  
  168.   
  169.           //给当前td添加rowSpan属性  
  170.   
  171.           tTd.setAttribute("rowSpan",totalcount[totalcount.length - 1]);  
  172.   
  173.             
  174.   
  175.           //将数组的最后一个元素弹出  
  176.   
  177.           totalcount.pop();  
  178.   
  179.           tNum = 0;  
  180.   
  181.        }  
  182.   
  183.        else   
  184.   
  185.        {  
  186.   
  187.           //删除当前td  
  188.   
  189.           tableRows[i].removeChild(tTd);  
  190.   
  191.        }  
  192.   
  193.    }  
  194.   
  195. }  


 

在onload事件里面调用函数

总结

其实每一个问题都会有很多的解决办法,这个是我在前台实现,其实大家也还可以在页面里面添加判断,来输出效果. 我们在做的时候多想想,多动动脑子,怎样才能使我们做事情更方便一些,会更节省时间,每次多积累,多总结,这样我们就会提高很多…

这是晚辈的第三篇技术文章,文章写的不是很好,希望各位前辈多多指教,

posted on 2015-12-03 13:31  張暁磊  阅读(2137)  评论(0)  编辑  收藏  举报

Powered by: 博客园 Copyright © 2024 張暁磊
Powered by .NET 8.0 on Kubernetes