1. 程式人生 > >table合併單元格(Jquery 外掛)

table合併單元格(Jquery 外掛)

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow

也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!

               

一個列表中有很多公共資訊重複出現,看上去比較繁瑣。在不不改動後臺資料結構的情況下,改下一下前端程式碼把table 中的重複項合併單元格。

 
 
 
 

實現程式碼參考如下:

 

首先要匯入:

    
<script src="http://code.jquery.com/jquery-latest.js"></script>
   

 

HTML程式碼:

    
<table id="my-table"> <thead> <tr> <th>姓名</th
>
 <th>學科</th> <th>學分</th> </tr> </thead> <tbody> <tr> <td>小銘</td> <td>數學</td> <td>100</td> </tr> <tr> <td>小銘</td> <td>英語</td>
 <td>100</td> </tr> <tr> <td>小銘</td> <td>化學</td> <td>100</td> </tr> <tr> <td>小銘</td> <td>美術</td> <td>100</td> </tr> <tr> <td>小紅</td> <td>數學</td> <td>100</td> </tr> <tr> <td>小紅</td> <td>英語</td> <td>100</td> </tr> <tr> <td>小紅</td> <td>化學</td> <td>100</td> </tr> <tr> <td>小紅</td> <td>美術</td> <td>100</td> </tr> </tbody></table>
   

 

script 程式碼:

    
!function($){ $.fn.rowspan=function(options)var defaults = {} var options = $.extend(defaults, options); this.each(function () var tds=$(this).find("tbody td:nth-child("+options.td+")"); var current_td=tds.eq(0); var k=1; tds.each(function(index, element) if($(this).text()==current_td.text()&&index!=0){ k++; $(this).remove(); current_td.attr("rowspan",k); current_td.css("vertical-align","middle"); }else{ current_td=$(this); k=1; } }); }) }}( window.jQuery );
   

 

用的話就很方便了:使用rowspan 方法就行,引數:{td:1} , 意思是合併第一列中的重複資料(但是列表中的資料初始化的時候一定要排序咯,當前只能合併行)

    
$("#my-table").rowspan({td:1});
   

 

demo下載地址:http://pan.baidu.com/share/link?shareid=363928&uk=2198392937

 

原文:http://www.guoxiaoming.com/?p=12


<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>           

給我老師的人工智慧教程打call!http://blog.csdn.net/jiangjunshow

這裡寫圖片描述