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.         在循环的同时添加条件。

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

/**

data格式{'table':$('tableId'),'columnId':'0','startRowNumber':'1','endRowNumber':}

*/

function initRowsPan(data) {

   //判断table是否存在

   if(!data.table)

   {

       return;

   }

   //判断是否存在操作的列编号

   if(!data.columnId||data.columnId<0)

   {

       return;

   }

   //记录开始的行号,如果为空,则默认从第0行开始

   var tStartNumber=data.startRowNumber;

   if(!tStartNumber||tStartNumber<0)

   {

       tStartNumber=0;

   }

   //记录table的所有hang集合

   var tableRows = data.table.rows;

   //记录结束的行号,如果为空,则默认为table的行号

   var tEndNumber=data.endRowNumber;

   if(!tEndNumber||tEndNumber<=0)

   {

       tEndNumber=tableRows.length;

   }

   else

   {

       //给传来的编号加1,因为表格的行编号是从0开始.

       tEndNumber+=1;

   }



   //得到相同内容的行数的集合

   var totalcount = new Array();

   //临时变量,循环记录表格中td的内容,用来判断td中的value是否发生修改

   var tTdValue = "";

   //临时变量,再循环时,如果td的值相同,那么变量加1, 否则将临时变量压入集合中

   var tRowsCount = 1;

   //存储table 的所有行数



   for ( var i = data.startRowNumber; i < tEndNumber; i++)

   {

       //首先拿出来td的值

       var tTdInner=tableRows[i].cells[data.columnId].innerHTML.trim();

       //如果是第一次走循环,直接continue;

       if (i == data.startRowNumber)

       {

          tTdValue = tTdInner;

          continue;

       }

       //如果当前拿出来的值和出处的值相同,那么将临时数量加1

       if (tTdValue == tTdInner)

       {

          tRowsCount++;

       }

        else

       {

          //否则添加到集合里面

          totalcount.push(tRowsCount);

          //并且将当前的td中的value赋给变量

          tTdValue = tTdInner;

          //数量清为1

          tRowsCount = 1;

       }

       //判断是否是循环的最后一次,如果是最后一次那个直接将当前的数量存储到集合里面

       if (i == tEndNumber -1)

       {

          totalcount.push(tRowsCount);

       }

   }



   //临时变量,再循环中判断是否和数组中的一项值相同

   var tNum = 0;

   //注意这个循环是倒着来的

   for (var i = tEndNumber - 1; i >= data.startRowNumber; i--)

   {

       //临时变量,存储td

       var tTd=tableRows[i].cells[data.columnId];

       tNum++;

       //如果发现tNum和数组中最后一个值相同,那么就可以断定相同的td已经结束[只是其中一个]

       if (tNum == totalcount[totalcount.length - 1])

       {

          //给当前td添加rowSpan属性

          tTd.setAttribute("rowSpan",totalcount[totalcount.length - 1]);



          //将数组的最后一个元素弹出

          totalcount.pop();

          tNum = 0;

       }

       else

       {

          //删除当前td

          tableRows[i].removeChild(tTd);

       }

   }

}

 

在onload事件里面调用函数

总结

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

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