jQuery : 分享合併Table的欄位 (RowSpan、ColSpan) 語法

wlhy

這邊分享一下，我參考http://willifirulais.blogspot.com/2007/07/jquery-table-column-break.html，
修改後用jQuery來進行表格合併的語法，(參考的那邊文章直接download不能執行@@)
jQuery語法view source
print?

01	////合併上下欄位(colIdx)

02	jQuery.fn.rowspan = function(colIdx) {

03	return this.each(function() {

04

var that;

05	$('tr', this).each(function(row) {

06	var thisRow = $('td:eq(' + colIdx + '),th:eq(' + colIdx + ')', this);

07	if ((that != null) && ($(thisRow).html() == $(that).html())) {

08	rowspan = $(that).attr("rowSpan");

09	if (rowspan == undefined) {

10	$(that).attr("rowSpan", 1);

11	rowspan = $(that).attr("rowSpan");

12

}

13	rowspan = Number(rowspan) + 1;

14	$(that).attr("rowSpan", rowspan);

15	$(thisRow).remove(); ////$(thisRow).hide();

16

} else {

17	that = thisRow;

18

}

19	that = (that == null) ? thisRow : that;

20

});

21	alert('1');

22

});

23

}

24

25	////當指定欄位(colDepend)值相同時，才合併欄位(colIdx)

26	jQuery.fn.rowspan = function(colIdx, colDepend) {

27	return this.each(function() {

28

var that;

29	var depend;

30	$('tr', this).each(function(row) {

31	var thisRow = $('td:eq(' + colIdx + '),th:eq(' + colIdx + ')', this);

32	var dependCol = $('td:eq(' + colDepend + '),th:eq(' + colDepend + ')', this);

33	if ((that != null) && (depend != null) && ($(thisRow).html() == $(that).html()) && ($(depend).html() == $(dependCol).html())) {

34	rowspan = $(that).attr("rowSpan");

35	if (rowspan == undefined) {

36	$(that).attr("rowSpan", 1);

37	rowspan = $(that).attr("rowSpan");

38

}

39	rowspan = Number(rowspan) + 1;

40	$(that).attr("rowSpan", rowspan);

41	$(thisRow).remove(); ////$(thisRow).hide();

42

43

} else {

44	that = thisRow;

45	depend = dependCol;

46

}

47	that = (that == null) ? thisRow : that;

48	depend = (depend == null) ? dependCol : depend;

49

});

50

});

51

}

52

53	////合併左右欄位

54	jQuery.fn.colspan = function(rowIdx) {

55	return this.each(function() {

56

var that;

57	$('tr', this).filter(":eq(" + rowIdx + ")").each(function(row) {

58	$(this).find('th,td').each(function(col) {

59	if ((that != null) && ($(this).html() == $(that).html())) {

60	colspan = $(that).attr("colSpan");

61	if (colspan == undefined) {

62	$(that).attr("colSpan", 1);

63	colspan = $(that).attr("colSpan");

64

}

65	colspan = Number(colspan) + 1;

66	$(that).attr("colSpan", colspan);

67	$(this).remove();

68

} else {

69	that = this;

70

}

71	that = (that == null) ? this : that;

72

});

73

});

74

});

75

}

範例一先來看範例 Html(一時想不到好的範例，先用文字數字帶過，請大家見諒)
view source
print?

01	<table id="table1" border="1" class="tbspan">

02

<tr>

03	<td>A</td>

04	<td>B</td>

05	<td>B</td>

06	<td>C</td>

07	<td>C</td>

08

</tr>

09

<tr>

10	<td>1</td>

11	<td>2</td>

12	<td>3</td>

13	<td>4</td>

14	<td>5</td>

15

</tr>

16

<tr>

17	<td>1</td>

18	<td>2</td>

19	<td>3</td>

20	<td>4</td>

21	<td>5</td>

22

</tr>

23

<tr>

24	<td>2</td>

25	<td>2</td>

26	<td>3</td>

27	<td>4</td>

28	<td>5</td>

29

</tr>

30

<tr>

31	<td>2</td>

32	<td>2</td>

33	<td>3</td>

34	<td>4</td>

35	<td>5</td>

36

</tr>

37

</table>

直接執行的結果
加上合併語法view source
print?

1	$(function() {

2	$('.tbspan').rowspan(0);

3	$('.tbspan').rowspan(1);

4	$('.tbspan').colspan(0);

5

});

合併後執行結果
使用上很簡單吧

範例二這邊額外說明另一種用法
參考上面的範例，假設我想將第四個欄位上下合併，但是希望根據第一個欄位的值
直接看希望執行的結果，讓大家比較容易理解
預期結果
語法view source
print?

1	$(function() {

2	$('.tbspan').rowspan(3,0);

3	$('.tbspan').rowspan(0);

4	$('.tbspan').rowspan(1);

5	$('.tbspan').colspan(0);

6

});

說明這邊利用 $('.tbspan').rowspan(3,0);
其中第一個參數是 合併哪一個欄位
第二個參數是 合併時根據哪個欄位內容要相同，才進行合併


ps. 最近這一兩個禮拜實在太忙了，寫的文章比較少，不過倒是累積了不少心得想跟大家分享，
希望可以抽出時間，不過不用像今天一大早起來寫  哈哈
希望文章對大家有幫助  ^_^

這邊分享一下，我參考http://willifirulais.blogspot.com/2007/07/jquery-table-column-break.html，
修改後用jQuery來進行表格合併的語法，(參考的那邊文章直接download不能執行@@)
jQuery語法view source
print?

01	////合併上下欄位(colIdx)

02	jQuery.fn.rowspan = function(colIdx) {

03	return this.each(function() {

04

var that;

05	$('tr', this).each(function(row) {

06	var thisRow = $('td:eq(' + colIdx + '),th:eq(' + colIdx + ')', this);

07	if ((that != null) && ($(thisRow).html() == $(that).html())) {

08	rowspan = $(that).attr("rowSpan");

09	if (rowspan == undefined) {

10	$(that).attr("rowSpan", 1);

11	rowspan = $(that).attr("rowSpan");

12

}

13	rowspan = Number(rowspan) + 1;

14	$(that).attr("rowSpan", rowspan);

15	$(thisRow).remove(); ////$(thisRow).hide();

16

} else {

17	that = thisRow;

18

}

19	that = (that == null) ? thisRow : that;

20

});

21	alert('1');

22

});

23

}

24

25	////當指定欄位(colDepend)值相同時，才合併欄位(colIdx)

26	jQuery.fn.rowspan = function(colIdx, colDepend) {

27	return this.each(function() {

28

var that;

29	var depend;

30	$('tr', this).each(function(row) {

31	var thisRow = $('td:eq(' + colIdx + '),th:eq(' + colIdx + ')', this);

32	var dependCol = $('td:eq(' + colDepend + '),th:eq(' + colDepend + ')', this);

33	if ((that != null) && (depend != null) && ($(thisRow).html() == $(that).html()) && ($(depend).html() == $(dependCol).html())) {

34	rowspan = $(that).attr("rowSpan");

35	if (rowspan == undefined) {

36	$(that).attr("rowSpan", 1);

37	rowspan = $(that).attr("rowSpan");

38

}

39	rowspan = Number(rowspan) + 1;

40	$(that).attr("rowSpan", rowspan);

41	$(thisRow).remove(); ////$(thisRow).hide();

42

43

} else {

44	that = thisRow;

45	depend = dependCol;

46

}

47	that = (that == null) ? thisRow : that;

48	depend = (depend == null) ? dependCol : depend;

49

});

50

});

51

}

52

53	////合併左右欄位

54	jQuery.fn.colspan = function(rowIdx) {

55	return this.each(function() {

56

var that;

57	$('tr', this).filter(":eq(" + rowIdx + ")").each(function(row) {

58	$(this).find('th,td').each(function(col) {

59	if ((that != null) && ($(this).html() == $(that).html())) {

60	colspan = $(that).attr("colSpan");

61	if (colspan == undefined) {

62	$(that).attr("colSpan", 1);

63	colspan = $(that).attr("colSpan");

64

}

65	colspan = Number(colspan) + 1;

66	$(that).attr("colSpan", colspan);

67	$(this).remove();

68

} else {

69	that = this;

70

}

71	that = (that == null) ? this : that;

72

});

73

});

74

});

75

}

範例一先來看範例 Html(一時想不到好的範例，先用文字數字帶過，請大家見諒)
view source
print?

01	<table id="table1" border="1" class="tbspan">

02

<tr>

03	<td>A</td>

04	<td>B</td>

05	<td>B</td>

06	<td>C</td>

07	<td>C</td>

08

</tr>

09

<tr>

10	<td>1</td>

11	<td>2</td>

12	<td>3</td>

13	<td>4</td>

14	<td>5</td>

15

</tr>

16

<tr>

17	<td>1</td>

18	<td>2</td>

19	<td>3</td>

20	<td>4</td>

21	<td>5</td>

22

</tr>

23

<tr>

24	<td>2</td>

25	<td>2</td>

26	<td>3</td>

27	<td>4</td>

28	<td>5</td>

29

</tr>

30

<tr>

31	<td>2</td>

32	<td>2</td>

33	<td>3</td>

34	<td>4</td>

35	<td>5</td>

36

</tr>

37

</table>

直接執行的結果
加上合併語法view source
print?

1	$(function() {

2	$('.tbspan').rowspan(0);

3	$('.tbspan').rowspan(1);

4	$('.tbspan').colspan(0);

5

});

合併後執行結果
使用上很簡單吧

範例二這邊額外說明另一種用法
參考上面的範例，假設我想將第四個欄位上下合併，但是希望根據第一個欄位的值
直接看希望執行的結果，讓大家比較容易理解
預期結果
語法view source
print?

1	$(function() {

2	$('.tbspan').rowspan(3,0);

3	$('.tbspan').rowspan(0);

4	$('.tbspan').rowspan(1);

5	$('.tbspan').colspan(0);

6

});

說明這邊利用 $('.tbspan').rowspan(3,0);
其中第一個參數是 合併哪一個欄位
第二個參數是 合併時根據哪個欄位內容要相同，才進行合併


ps. 最近這一兩個禮拜實在太忙了，寫的文章比較少，不過倒是累積了不少心得想跟大家分享，
希望可以抽出時間，不過不用像今天一大早起來寫  哈哈
希望文章對大家有幫助  ^_^