jquery合并表格中相同文本的相鄰單元格
更新時間: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ù)形式請參考jQuery中nth-child的參數(shù)。 // 如果為數(shù)字,則從最左邊第一行為1開始算起。 // "even" 表示偶數(shù)行 // "odd" 表示奇數(shù)行 // "3n+1" 表示的行數(shù)為1、4、7、10....... //參數(shù)說明:_w_table_maxcolnum 為指定行中單元格對應(yīng)的最大列數(shù),列數(shù)大于這個數(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>
測試使用了一下,很贊!
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
您可能感興趣的文章:
- 基于JQuery實(shí)現(xiàn)相同內(nèi)容合并單元格的代碼
- 基于jquery的合并table相同單元格的插件(精簡版)
- jquery 動態(tài)合并單元格的實(shí)現(xiàn)方法
- 合并table相同單元格的jquery插件分享(很精簡)
- 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)仿新浪微博評論滾動效果
這篇文章主要介紹了jquery實(shí)現(xiàn)仿新浪微博評論滾動效果,基于jquery實(shí)現(xiàn)頁面圖文定時滾動效果,涉及jquery頁面元素的遍歷與樣式的動態(tài)操作技巧,是一款經(jīng)典的jquery滾動特效,非常具有實(shí)用價值,需要的朋友可以參考下2015-08-08jQuery實(shí)現(xiàn)的鼠標(biāo)經(jīng)過時變寬的效果(附demo源碼)
這篇文章主要介紹了jQuery實(shí)現(xiàn)的鼠標(biāo)經(jīng)過時變寬的效果,實(shí)例演示了jQuery的Kwicks插件實(shí)現(xiàn)針對鼠標(biāo)事件的響應(yīng)與頁面元素樣式動態(tài)變換的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04Jquery倒數(shù)計(jì)時按鈕setTimeout的實(shí)例代碼
這篇文章介紹了Jquery倒數(shù)計(jì)時按鈕setTimeout的實(shí)例,有需要的朋友可以參考一下2013-07-07基于jquery實(shí)現(xiàn)后臺左側(cè)菜單點(diǎn)擊上下滑動顯示
一個左側(cè)菜單點(diǎn)擊是可以上下滑動,簡潔時尚,復(fù)制即可使用,感興趣的朋友可以參考下哈,希望對你有所幫助2013-04-04jQuery點(diǎn)擊改變class并toggle及toggleClass()方法定義用法
這篇文章主要介紹了jQuery點(diǎn)擊改變class并toggle及toggleClass()方法定義用法的相關(guān)資料,需要的朋友可以參考下2015-12-12