日常开发中，经常遇到表格里需要自动合并单元格，考虑到写服务器控件比较消耗性能，因些还是把这种工作交给客户端Javascript去做吧，基于习惯用jquery框架，所以封装了一个Jquery插件。
效果：
jquery.table.rowspan.js
(function ($) {
$.fn.extend({
//表格合并单元格，colIdx要合并的列序号，从0开始
"rowspan": function (colIdx) {
return this.each(function () {
var that;
$('tr', this).each(function (row) {
$('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) {
if (that != null && $(this).html() == $(that).html()) {
rowspan = $(that).attr("rowSpan");
if (rowspan == undefined) {
$(that).attr("rowSpan", 1);
rowspan = $(that).attr("rowSpan");
}
rowspan = Number(rowspan) + 1;
$(that).attr("rowSpan", rowspan);
$(this).hide();
} else {
that = this;
}
});
});
});
}
});
})(jQuery);
html文件
<!DOCTYPE html>
<html>
<head>
<title>表格单元格合并Demo</title>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.table.rowspan.js"></script>
<script type="text/javascript">
function initLoad() {
$("#tbListTM").rowspan(0); //第一列合并
$("#tbListTM").rowspan(1); //第二列合并
}
$(document).ready(function () {
initLoad();
});
</script>
<style>
.Nlist_con table {
border-left: 1px solid #c9c9c9;
border-top: 1px solid #c9c9c9;
border-collapse: collapse;
}
.Nlist_con table th {
border-right: 1px solid #c9c9c9;
border-bottom: 1px solid #c9c9c9;
background: #ececec;
padding: 10px 5px;
font-size: 14px;
color: #2586d8;
font-family: "宋体";
}
.Nlist_con table td {
border-right: 1px solid #c9c9c9;
border-bottom: 1px solid #c9c9c9;
background: #fff;
padding: 6px 3px;
font-size: 12px;
line-height: 20px;
color: #676767;
}
.Nlist_con table td a {
text-decoration: none;
color: #2586d8;
cursor: pointer;
}
.Nlist_con table td a:hover {
text-decoration: underline;
color: #2586d8;
}
</style>
</head>
<body>
<div class="Nlist_con">
<table
border="1"
cellspacing="1"
cellpadding="0"
width="100%"
id="tbListTM"
>
<tr align="center">
<th>发展领域</th>
<th>发展要素</th>
<th style="width: 60px">年度</th>
<th style="width: 100px">评价内容</th>
<th>分值</th>
<th>评价办法</th>
</tr>
<tr>
<td style="text-align: center">学校发展目标</td>
<td>
1.学校有先进办学理念，办学目标符合教育改革发展要求，符合学校实际和发展规律，体现出阶段性、递进性和自身特别。
</td>
<td>
<span id="ctl00_ContentPlaceHolder1_rptListTM_ctl00_lblND"
>2015</span
>
</td>
<td>ee</td>
<td>2</td>
<td>办法1</td>
</tr>
<tr>
<td style="text-align: center">学校发展目标</td>
<td>
1.学校有先进办学理念，办学目标符合教育改革发展要求，符合学校实际和发展规律，体现出阶段性、递进性和自身特别。
</td>
<td>
<span id="ctl00_ContentPlaceHolder1_rptListTM_ctl01_lblND"
>2016</span
>
</td>
<td>dd</td>
<td>2</td>
<td>办法2</td>
</tr>
<tr>
<td style="text-align: center">学校发展目标</td>
<td>
1.学校有先进办学理念，办学目标符合教育改革发展要求，符合学校实际和发展规律，体现出阶段性、递进性和自身特别。
</td>
<td>
<span id="ctl00_ContentPlaceHolder1_rptListTM_ctl02_lblND"
>2017</span
>
</td>
<td>ff</td>
<td>2</td>
<td>办法3</td>
</tr>
<tr>
<td style="text-align: center">学校发展目标</td>
<td>
2.培养目标符合教育方针。注重促进学生、教师主动发展和个性特长的发展，体现学校的个性与特色。
</td>
<td>
<span id="ctl00_ContentPlaceHolder1_rptListTM_ctl03_lblND"
>2015</span
>
</td>
<td></td>
<td>0</td>
<td></td>
</tr>
<tr>
<td style="text-align: center">学校发展目标</td>
<td>
2.培养目标符合教育方针。注重促进学生、教师主动发展和个性特长的发展，体现学校的个性与特色。
</td>
<td>
<span id="ctl00_ContentPlaceHolder1_rptListTM_ctl04_lblND"
>2016</span
>
</td>
<td></td>
<td>0</td>
<td></td>
</tr>
<tr>
<td style="text-align: center">学校发展目标</td>
<td>
2.培养目标符合教育方针。注重促进学生、教师主动发展和个性特长的发展，体现学校的个性与特色。
</td>
<td>
<span id="ctl00_ContentPlaceHolder1_rptListTM_ctl05_lblND"
>2017</span
>
</td>
<td></td>
<td>0</td>
<td></td>
</tr>
</table>
</div>
</body>
</html>