html合并单元格自动,jquery.table.rowspan.js 表格自动合并单元格插件

日常开发中，经常遇到表格里需要自动合并单元格，考虑到写服务器控件比较消耗性能，因些还是把这种工作交给客户端Javascript去做吧，基于习惯用jquery框架，所以封装了一个Jquery插件。

1.新创建一个js文件，命名为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);

2.使用实例

表格单元格合并Demo

function initLoad() {

$("#tbListTM").rowspan(0); //第一列合并

$("#tbListTM").rowspan(1);//第二列合并

}

$(document).ready(function () {

initLoad();

});

.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;

}

发展领域	发展要素	年度	评价内容	分值	评价办法
学校发展目标	1.学校有先进办学理念，办学目标符合教育改革发展要求，符合学校实际和发展规律，体现出阶段性、递进性和自身特别。	2015	ee	2	办法1
学校发展目标	1.学校有先进办学理念，办学目标符合教育改革发展要求，符合学校实际和发展规律，体现出阶段性、递进性和自身特别。	2016	dd	2	办法2
学校发展目标	1.学校有先进办学理念，办学目标符合教育改革发展要求，符合学校实际和发展规律，体现出阶段性、递进性和自身特别。	2017	ff	2	办法3
学校发展目标	2.培养目标符合教育方针。注重促进学生、教师主动发展和个性特长的发展，体现学校的个性与特色。	2015		0
学校发展目标	2.培养目标符合教育方针。注重促进学生、教师主动发展和个性特长的发展，体现学校的个性与特色。	2016		0
学校发展目标	2.培养目标符合教育方针。注重促进学生、教师主动发展和个性特长的发展，体现学校的个性与特色。	2017		0

3.效果演示

4.源码下载

源码下载