通信人家园

标题: jQuery : 分享合併Table的欄位 (RowSpan、ColSpan) 語法  [查看完整版帖子] [打印本页]
时间:  2010-11-25 22:18
作者: wlhy     标题: jQuery : 分享合併Table的欄位 (RowSpan、ColSpan) 語法

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

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

02jQuery.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)

26jQuery.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////合併左右欄位

54jQuery.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)

02jQuery.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)

26jQuery.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////合併左右欄位

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





通信人家园 (https://www.txrjy.com/) Powered by C114