如何使用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>

 

完成!!!