首页 > 代码库 > js合并table单元格实例
js合并table单元格实例
这里展示js合并table的单元格，代码亲测可行
后台采用springmvc搭建
Record实体类
public class Record {
public String isp;
public String large_area;
public String province;
public String name;
public String age;
...... //省略get和set方法
}action方法
@RequestMapping(value="http://www.mamicode.com/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页面展示
<%@ 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="http://www.mamicode.com/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片段后
<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>效果如下，可以看到字段相同的列已经进行合并了：
本文出自 “bulajunjun” 博客，请务必保留此出处http://5148737.blog.51cto.com/5138737/1543091
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。