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事件里面调用函数

总结

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

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

如果有什么问题,可以给晚辈留言,或直接发送邮箱至 nishiwode923@qq.com 谢谢…