这里展示js合并table的单元格，代码亲测可行
后台采用springmvc搭建
Record实体类
|
1
2
3
4
5
6
7
8
|
public
class
Record {
public
String isp;
public
String large_area;
public
String province;
public
String name;
public
String age;
......
//省略get和set方法
}
|
action方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
@RequestMapping
(value=
"/handlerList"
)
public
ModelAndView handlerList(HttpServletRequest request,
HttpServletResponse response)
throws
Exception {
List list =
new
ArrayList();
Record record1 =
new
Record();
record1.setIsp(
"CUC"
);
record1.setLarge_area(
"广东"
);
record1.setProvince(
"深圳"
);
record1.setName(
"name1"
);
record1.setAge(
"age1"
);
Record record2 =
new
Record();
record2.setIsp(
"CUC"
);
record2.setLarge_area(
"广东"
);
record2.setProvince(
"广州"
);
record2.setName(
"name2"
);
record2.setAge(
"age2"
);
Record record3 =
new
Record();
record3.setIsp(
"NU"
);
record3.setLarge_area(
"江西"
);
record3.setProvince(
"宜春"
);
record3.setName(
"name3"
);
record3.setAge(
"age3"
);
Record record4 =
new
Record();
record4.setIsp(
"NU"
);
record4.setLarge_area(
"江西"
);
record4.setProvince(
"宜春"
);
record4.setName(
"name4"
);
record4.setAge(
"age4"
);
Record record5 =
new
Record();
record5.setIsp(
"NU"
);
record5.setLarge_area(
"江西"
);
record5.setProvince(
"赣州"
);
record5.setName(
"name5"
);
record5.setAge(
"age5"
);
Record record6 =
new
Record();
record6.setIsp(
"NU"
);
record6.setLarge_area(
"湖南"
);
record6.setProvince(
"郴州"
);
record6.setName(
"name6"
);
record6.setAge(
"age6"
);
list.add(record1);
list.add(record2);
list.add(record3);
list.add(record4);
list.add(record5);
list.add(record6);
Map map =
new
HashMap();
map.put(
"list"
, list);
return
new
ModelAndView(
"/showList"
,map);
}
|
jsp页面展示
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<%@ page language=
"java"
contentType=
"text/html; charset=UTF-8"
pageEncoding=
"UTF-8"
%>
<%@ taglib uri=
"http://java.sun.com/jstl/core_rt"
prefix=
"c"
%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=UTF-8"
>
<title>Insert title here</title>
<script type=
"text/javascript"
src=
"asserts/js/jquery-1.7.2.min.js"
></script>
</head>
<body>
<table id=
"testTable"
width=
"100%"
border=
"1"
>
<thead>
<tr align=
"center"
>
<th width=
"94"
height=
"38"
>运营商</th>
<th width=
"198"
height=
"38"
>
7
天平均冗余带宽(G)</th>
<th width=
"216"
height=
"38"
>今天冗余带宽(G)</th>
<th width=
"196"
height=
"38"
>未来
30
天冗余带宽(G)</th>
<th width=
"263"
height=
"38"
>目前已用带宽(G)</th>
</tr>
</thead>
<thbody>
<c:forEach var=
"item"
items=
"${list}"
varStatus=
"status"
>
<tr>
<td>${item.isp }</td>
<td>${item.large_area}</td>
<td>${item.province}</td>
<td>${item.name}</td>
<td>${item.age}</td>
</tr>
</c:forEach>
</thbody>
</table>
</body>
</html>
|
可以看到未合并时效果如下：
jsp页面中添加相关的js片段后
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
<SCRIPT type=
"text/javascript"
>
$(document).ready(function () {
table_rowspan(
"#testTable"
,
1
);
table_rowspan(
"#testTable"
,
2
);
table_rowspan(
"#testTable"
,
3
);
})
//函数说明：合并指定表格（表格id为table_id）指定列（列数为table_colnum）的相同文本的相邻单元格
//参数说明：table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="table1" ，此参数应为 #table1
//参数说明：table_colnum 为需要合并单元格的所在列。为数字，从最左边第一列为1开始算起。
function table_rowspan(table_id, table_colnum) {
table_firsttd =
""
;
table_currenttd =
""
;
table_SpanNum =
0
;
colnum_Obj = $(table_id +
" tr td:nth-child("
+ table_colnum +
")"
);
colnum_Obj.each(function (i) {
if
(i ==
0
) {
table_firsttd = $(
this
);
table_SpanNum =
1
;
}
else
{
table_currenttd = $(
this
);
if
(table_firsttd.text() == table_currenttd.text()) {
table_SpanNum++;
table_currenttd.hide();
//remove();
table_firsttd.attr(
"rowSpan"
, table_SpanNum);
}
else
{
table_firsttd = $(
this
);
table_SpanNum =
1
;
}
}
});
}
//函数说明：合并指定表格（表格id为table_id）指定行（行数为table_rownum）的相同文本的相邻单元格
//参数说明：table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="table1" ，此参数应为 #table1
//参数说明：table_rownum 为需要合并单元格的所在行。其参数形式请参考jQuery中nth-child的参数。
// 如果为数字，则从最左边第一行为1开始算起。
// "even" 表示偶数行
// "odd" 表示奇数行
// "3n+1" 表示的行数为1、4、7、10.......
//参数说明：table_maxcolnum 为指定行中单元格对应的最大列数，列数大于这个数值的单元格将不进行比较合并。
// 此参数可以为空，为空则指定行的所有单元格要进行比较合并。
function table_colspan(table_id, table_rownum, table_maxcolnum) {
if
(table_maxcolnum ==
void
0
) {
table_maxcolnum =
0
;
}
table_firsttd =
""
;
table_currenttd =
""
;
table_SpanNum =
0
;
$(table_id +
" tr:nth-child("
+ table_rownum +
")"
).each(function (i) {
row_Obj = $(
this
).children();
row_Obj.each(function (i) {
if
(i ==
0
) {
table_firsttd = $(
this
);
table_SpanNum =
1
;
}
else
if
((table_maxcolnum >
0
) && (i > table_maxcolnum)) {
return
""
;
}
else
{
table_currenttd = $(
this
);
if
(table_firsttd.text() == table_currenttd.text()) {
table_SpanNum++;
table_currenttd.hide();
//remove();
table_firsttd.attr(
"colSpan"
, table_SpanNum);
}
else
{
table_firsttd = $(
this
);
table_SpanNum =
1
;
}
}
});
});
}
</SCRIPT>
|
效果如下，可以看到字段相同的列已经进行合并了：
本文转自布拉君君 51CTO博客，原文链接：http://blog.51cto.com/5148737/1543091，如需转载请自行联系原作者
扫一扫
509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
