jquery合并表格中相同文本的相鄰單元格
更新時(shí)間:2015年07月17日 10:23:52 投稿:hebedich
這篇文章主要介紹了jquery合并表格中相同文本的相鄰單元格的相關(guān)資料,需要的朋友可以參考下
一、效果
二、代碼
<!DOCTYPE HTML> <html> <head> <title>Example</title> <meta charset="utf-8"/> <style></style> <script src="js/jquery-2.1.4.min.js"></script> </head> <body> <table id="process" cellpadding="2" cellspacing="0" border="1"> <thead> <tr > <td>col0</td> <td>col1</td> <td>col2</td> <td>col3</td> </tr> </thead> <tbody> <tr> <td>SuZhou</td> <td>11111</td> <td>22222</td> <td>SuZhouCity</td> </tr> <tr> <td>SuZhou</td> <td>33333</td> <td>44444</td> <td>SuZhouCity</td> </tr> <tr> <td>SuZhou</td> <td>55555</td> <td>66666</td> <td>SuZhouCity</td> </tr> <tr> <td>ShangHai</td> <td>77777</td> <td>88888</td> <td>ShangHaiCity</td> </tr> <tr> <td>ShangHai</td> <td>uuuuu</td> <td>hhhhh</td> <td>ShangHaiCity</td> </tr> <tr> <td>ShangHai</td> <td>ggggg</td> <td>ccccc</td> <td>ShangHaiCity</td> </tr> <tr> <td>GuangZhou</td> <td>ttttt</td> <td>eeeee</td> <td>GuangZhouCity</td> </tr> <tr> <td>GuangZhou</td> <td>ppppp</td> <td>qqqqq</td> <td>GuangZhouCity</td> </tr> </tbody> </table> <script type="text/javascript"> //函數(shù)說明:合并指定表格(表格id為_w_table_id)指定列(列數(shù)為_w_table_colnum)的相同文本的相鄰單元格 //參數(shù)說明:_w_table_id 為需要進(jìn)行合并單元格的表格的id。如在HTMl中指定表格 id="data" ,此參數(shù)應(yīng)為 #data //參數(shù)說明:_w_table_colnum 為需要合并單元格的所在列。為數(shù)字,從最左邊第一列為1開始算起。 function _w_table_rowspan(_w_table_id,_w_table_colnum){ _w_table_firsttd = ""; _w_table_currenttd = ""; _w_table_SpanNum = 0; _w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _w_table_colnum + ")"); _w_table_Obj.each(function(i){ if(i==0){ _w_table_firsttd = $(this); _w_table_SpanNum = 1; }else{ _w_table_currenttd = $(this); if(_w_table_firsttd.text()==_w_table_currenttd.text()){ _w_table_SpanNum++; _w_table_currenttd.hide(); //remove(); _w_table_firsttd.attr("rowSpan",_w_table_SpanNum); }else{ _w_table_firsttd = $(this); _w_table_SpanNum = 1; } } }); } //函數(shù)說明:合并指定表格(表格id為_w_table_id)指定行(行數(shù)為_w_table_rownum)的相同文本的相鄰單元格 //參數(shù)說明:_w_table_id 為需要進(jìn)行合并單元格的表格id。如在HTMl中指定表格 id="data" ,此參數(shù)應(yīng)為 #data //參數(shù)說明:_w_table_rownum 為需要合并單元格的所在行。其參數(shù)形式請(qǐng)參考jQuery中nth-child的參數(shù)。 // 如果為數(shù)字,則從最左邊第一行為1開始算起。 // "even" 表示偶數(shù)行 // "odd" 表示奇數(shù)行 // "3n+1" 表示的行數(shù)為1、4、7、10....... //參數(shù)說明:_w_table_maxcolnum 為指定行中單元格對(duì)應(yīng)的最大列數(shù),列數(shù)大于這個(gè)數(shù)值的單元格將不進(jìn)行比較合并。 // 此參數(shù)可以為空,為空則指定行的所有單元格要進(jìn)行比較合并。 function _w_table_colspan(_w_table_id,_w_table_rownum,_w_table_maxcolnum){ if(_w_table_maxcolnum == void 0){_w_table_maxcolnum=0;} _w_table_firsttd = ""; _w_table_currenttd = ""; _w_table_SpanNum = 0; $(_w_table_id + " tr:nth-child(" + _w_table_rownum + ")").each(function(i){ _w_table_Obj = $(this).children(); _w_table_Obj.each(function(i){ if(i==0){ _w_table_firsttd = $(this); _w_table_SpanNum = 1; }else if((_w_table_maxcolnum>0)&&(i>_w_table_maxcolnum)){ return ""; }else{ _w_table_currenttd = $(this); if(_w_table_firsttd.text()==_w_table_currenttd.text()){ _w_table_SpanNum++; _w_table_currenttd.hide(); //remove(); _w_table_firsttd.attr("colSpan",_w_table_SpanNum); }else{ _w_table_firsttd = $(this); _w_table_SpanNum = 1; } } }); }); } $(document).ready(function(){ // _w_table_rowspan("#process",4); // _w_table_rowspan("#process",3); // _w_table_rowspan("#process",2); _w_table_rowspan("#process",1); }); </script> </body> </html>
測(cè)試使用了一下,很贊!
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
您可能感興趣的文章:
- 基于JQuery實(shí)現(xiàn)相同內(nèi)容合并單元格的代碼
- 基于jquery的合并table相同單元格的插件(精簡(jiǎn)版)
- jquery 動(dòng)態(tài)合并單元格的實(shí)現(xiàn)方法
- 合并table相同單元格的jquery插件分享(很精簡(jiǎn))
- jquery miniui 教程 表格控件 合并單元格應(yīng)用
- JQuery實(shí)現(xiàn)表格中相同單元格合并示例代碼
- jQuery實(shí)現(xiàn)HTML表格單元格的合并功能
- 基于jQuery的合并表格中相同文本的相鄰單元格的代碼
- 使用jQuery 操作table 完成單元格合并的實(shí)例
- jquery 合并內(nèi)容相同的單元格(示例代碼)
- jQuery實(shí)現(xiàn)合并表格單元格中相同行操作示例
相關(guān)文章
jquery實(shí)現(xiàn)仿新浪微博評(píng)論滾動(dòng)效果
這篇文章主要介紹了jquery實(shí)現(xiàn)仿新浪微博評(píng)論滾動(dòng)效果,基于jquery實(shí)現(xiàn)頁(yè)面圖文定時(shí)滾動(dòng)效果,涉及jquery頁(yè)面元素的遍歷與樣式的動(dòng)態(tài)操作技巧,是一款經(jīng)典的jquery滾動(dòng)特效,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08jQuery實(shí)現(xiàn)的鼠標(biāo)經(jīng)過時(shí)變寬的效果(附demo源碼)
這篇文章主要介紹了jQuery實(shí)現(xiàn)的鼠標(biāo)經(jīng)過時(shí)變寬的效果,實(shí)例演示了jQuery的Kwicks插件實(shí)現(xiàn)針對(duì)鼠標(biāo)事件的響應(yīng)與頁(yè)面元素樣式動(dòng)態(tài)變換的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04Jquery倒數(shù)計(jì)時(shí)按鈕setTimeout的實(shí)例代碼
這篇文章介紹了Jquery倒數(shù)計(jì)時(shí)按鈕setTimeout的實(shí)例,有需要的朋友可以參考一下2013-07-07基于jquery實(shí)現(xiàn)后臺(tái)左側(cè)菜單點(diǎn)擊上下滑動(dòng)顯示
一個(gè)左側(cè)菜單點(diǎn)擊是可以上下滑動(dòng),簡(jiǎn)潔時(shí)尚,復(fù)制即可使用,感興趣的朋友可以參考下哈,希望對(duì)你有所幫助2013-04-04jQuery點(diǎn)擊改變class并toggle及toggleClass()方法定義用法
這篇文章主要介紹了jQuery點(diǎn)擊改變class并toggle及toggleClass()方法定義用法的相關(guān)資料,需要的朋友可以參考下2015-12-12