如何使用jQuery动态合并单元格

使用 jquery.table.rowspan.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);

 

如何调用?合并需要合并的列~~~

html块

table加id

 

如下

<table id="tbListTM"></table>

 

js块

引用并调用

 

如下

<script type="text/javascript" src="Scripts/jquery.table.rowspan.js"></script>

<script>

　　function initLoad() {

　　　　$("#tbListTM").rowspan(0);

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

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

　　}

　　$(document).ready(function () {

　　　　initLoad();

　　});

 

</script>

 

完成!!!