欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于jQuery的合并表格中相同文本的相鄰單元格的代碼

 更新時間:2011年04月06日 22:21:32   作者:  
有時候需要合并表格中相同文本的相鄰單元格,需要的朋友可以參考下。

ONE

已經(jīng)生成的數(shù)據(jù)表格大致內(nèi)容如下:

地區(qū) 地區(qū) 商品代碼 商品名稱 數(shù)量 有效期至 距效期(月) 產(chǎn)品批號 規(guī)格 單位 條形碼
廣東 深圳 00028 紅花油              
廣東 深圳 00028 紅花油              
廣東 深圳 00028 紅花油              
廣東 廣州 00027 白花油              
廣東 廣州 00028 紅花油              
廣東 深圳 00028 紅花油              
廣東 深圳 00028 紅花油              
廣東 深圳 00028 紅花油              
廣東 深圳 00028 紅花油              

需要將前四列具有相同文本的相鄰單元格進行自動合并,合并后如下:

地區(qū) 地區(qū) 商品代碼 商品名稱 數(shù)量 有效期至 距效期(月) 產(chǎn)品批號 規(guī)格 單位 條形碼
廣東 深圳 00028 紅花油              
             
             
廣州 00027 白花油              
00028 紅花油              
深圳              
             
             
             

1、在html的head中引入jQuery

2、添加合并單元格的函數(shù)

復(fù)制代碼 代碼如下:

//函數(shù)說明:合并指定表格(表格id為_w_table_id)指定列(列數(shù)為_w_table_colnum)的相同文本的相鄰單元格
//參數(shù)說明:_w_table_id 為需要進行合并單元格的表格的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 為需要進行合并單元格的表格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ù)值的單元格將不進行比較合并。
// 此參數(shù)可以為空,為空則指定行的所有單元格要進行比較合并。
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;
}
}
});
});
}

3、在html的head中調(diào)用合并函數(shù)合并單元格
復(fù)制代碼 代碼如下:

<script type="text/javascript"><!--
$(document).ready(function(){
_w_table_rowspan("#spdata",4);
_w_table_rowspan("#spdata",3);
_w_table_rowspan("#spdata",2);
_w_table_rowspan("#spdata",1);
});
// -->
</script>

相關(guān)文章

  • jQuery插件開發(fā)基礎(chǔ)簡單介紹

    jQuery插件開發(fā)基礎(chǔ)簡單介紹

    jquery插件開發(fā)基礎(chǔ):開發(fā)jQuery 插件的基本格式,開發(fā)全局函數(shù)的基本格式,接下來為您詳細介紹,感興趣的朋友可以了解哦
    2013-01-01
  • jquery給元素設(shè)置屬性的簡單方法

    jquery給元素設(shè)置屬性的簡單方法

    jquery是一個js插件庫,現(xiàn)在很多前端開發(fā)人員都是使用它來操作dom的,對于dom操作,jquery提供了很多方法,這篇文章主要給大家介紹了關(guān)于jquery給元素設(shè)置屬性的簡單方法,需要的朋友可以參考下
    2023-06-06
  • 一個基于jquery的文本框記數(shù)器

    一個基于jquery的文本框記數(shù)器

    基于jquery的文本框記數(shù)器實現(xiàn)代碼,需要的朋友可以參考下
    2012-09-09
  • jQuery判斷checkbox是否選中的3種方法

    jQuery判斷checkbox是否選中的3種方法

    這篇文章主要介紹了jQuery判斷checkbox是否選中的3種方法,本文中的方法使用ID選擇器實現(xiàn),比網(wǎng)上其它的一些長篇大論的文章更加簡練,需要的朋友可以參考下
    2014-08-08
  • jQuery仿Excel表格編輯功能的實現(xiàn)代碼

    jQuery仿Excel表格編輯功能的實現(xiàn)代碼

    Handsontable 是一個相當給力的 jQuery 插件,它實現(xiàn)了 HTML 頁面中的表格編輯功能,并且是仿 Excel 的編輯效果。
    2013-05-05
  • jquery實現(xiàn)的分頁顯示功能示例

    jquery實現(xiàn)的分頁顯示功能示例

    這篇文章主要介紹了jquery實現(xiàn)的分頁顯示功能,涉及jQuery的ajax交互及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
    2019-08-08
  • jQuery登陸判斷簡單實現(xiàn)代碼

    jQuery登陸判斷簡單實現(xiàn)代碼

    登陸判斷在實際應(yīng)用中還是比較常見,在客戶端執(zhí)行判斷可以減少服務(wù)器端的負擔,感興趣的朋友可以參考下
    2013-04-04
  • jQuery中appendTo()方法用法實例

    jQuery中appendTo()方法用法實例

    這篇文章主要介紹了jQuery中appendTo()方法用法,實例分析了appendTo()方法的功能、定義及把匹配的元素插入指定元素結(jié)尾的使用技巧,需要的朋友可以參考下
    2015-01-01
  • jquery中EasyUI實現(xiàn)同步樹

    jquery中EasyUI實現(xiàn)同步樹

    本文主要是給大家分享了一則使用EasyUI實現(xiàn)同步樹的代碼,主要是使用遞歸實現(xiàn),非常實用的方法,推薦給小伙伴們。
    2015-03-03
  • jquery ajax請求實例深入解析

    jquery ajax請求實例深入解析

    jquery中封裝了一些ajax請求的方法,很實用,本文將以此引入一個實例,對jquery中ajax請求的方法進行詳細介紹,需要了解更多的朋友可以參考下
    2012-11-11

最新評論