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

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

1. /**
2. data格式{'table':$('tableId'),'columnId':'0','startRowNumber':'1','endRowNumber':}
3. */
4. function initRowsPan(data) {
5. //判断table是否存在
6. if(!data.table)
7. {
8. return;
9. }
10. //判断是否存在操作的列编号
11. if(!data.columnId||data.columnId<0)
12. {
13. return;
14. }
15. //记录开始的行号,如果为空,则默认从第0行开始
16. var tStartNumber=data.startRowNumber;
17. if(!tStartNumber||tStartNumber<0)
18. {
19. tStartNumber=0;
20. }
21. //记录table的所有hang集合
22. var tableRows = data.table.rows;
23. //记录结束的行号,如果为空,则默认为table的行号
24. var tEndNumber=data.endRowNumber;
25. if(!tEndNumber||tEndNumber<=0)
26. {
27. tEndNumber=tableRows.length;
28. }
29. else
30. {
31. //给传来的编号加1,因为表格的行编号是从0开始.
32. tEndNumber+=1;
33. }
34. //得到相同内容的行数的集合
35. var totalcount = new Array();
36. //临时变量,循环记录表格中td的内容,用来判断td中的value是否发生修改
37. var tTdValue = "";
38. //临时变量,再循环时,如果td的值相同,那么变量加1, 否则将临时变量压入集合中
39. var tRowsCount = 1;
40. //存储table 的所有行数
41. for ( var i = data.startRowNumber; i < tEndNumber; i++)
42. {
43. //首先拿出来td的值
44. var tTdInner=tableRows[i].cells[data.columnId].innerHTML.trim();
45. //如果是第一次走循环,直接continue;
46. if (i == data.startRowNumber)
47. {
48. tTdValue = tTdInner;
49. continue;
50. }
51. //如果当前拿出来的值和出处的值相同,那么将临时数量加1
52. if (tTdValue == tTdInner)
53. {
54. tRowsCount++;
55. }
56. else
57. {
58. //否则添加到集合里面
59. totalcount.push(tRowsCount);
60. //并且将当前的td中的value赋给变量
61. tTdValue = tTdInner;
62. //数量清为1
63. tRowsCount = 1;
64. }
65. //判断是否是循环的最后一次,如果是最后一次那个直接将当前的数量存储到集合里面
66. if (i == tEndNumber -1)
67. {
68. totalcount.push(tRowsCount);
69. }
70. }
71. //临时变量,再循环中判断是否和数组中的一项值相同
72. var tNum = 0;
73. //注意这个循环是倒着来的
74. for (var i = tEndNumber - 1; i >= data.startRowNumber; i--)
75. {
76. //临时变量,存储td
77. var tTd=tableRows[i].cells[data.columnId];
78. tNum++;
79. //如果发现tNum和数组中最后一个值相同,那么就可以断定相同的td已经结束[只是其中一个]
80. if (tNum == totalcount[totalcount.length - 1])
81. {
82. //给当前td添加rowSpan属性
83. tTd.setAttribute("rowSpan",totalcount[totalcount.length - 1]);
84. //将数组的最后一个元素弹出
85. totalcount.pop();
86. tNum = 0;
87. }
88. else
89. {
90. //删除当前td
91. tableRows[i].removeChild(tTd);
92. }
93. }
94. }

在onload事件里面调用函数

总结

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

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