亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

ONE

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

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

需要將前四列具有相同文本的相鄰單元格進(jìn)行自動(dòng)合并,合并后如下:

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

1、在html的head中引入jQuery

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

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

//函數(shù)說(shuō)明:合并指定表格(表格id為_(kāi)w_table_id)指定列(列數(shù)為_(kāi)w_table_colnum)的相同文本的相鄰單元格
//參數(shù)說(shuō)明:_w_table_id 為需要進(jìn)行合并單元格的表格的id。如在HTMl中指定表格 id="data" ,此參數(shù)應(yīng)為 #data
//參數(shù)說(shuō)明:_w_table_colnum 為需要合并單元格的所在列。為數(shù)字,從最左邊第一列為1開(kāi)始算起。
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ù)說(shuō)明:合并指定表格(表格id為_(kāi)w_table_id)指定行(行數(shù)為_(kāi)w_table_rownum)的相同文本的相鄰單元格
//參數(shù)說(shuō)明:_w_table_id 為需要進(jìn)行合并單元格的表格id。如在HTMl中指定表格 id="data" ,此參數(shù)應(yīng)為 #data
//參數(shù)說(shuō)明:_w_table_rownum 為需要合并單元格的所在行。其參數(shù)形式請(qǐng)參考jQuery中nth-child的參數(shù)。
// 如果為數(shù)字,則從最左邊第一行為1開(kāi)始算起。
// "even" 表示偶數(shù)行
// "odd" 表示奇數(shù)行
// "3n+1" 表示的行數(shù)為1、4、7、10.
//參數(shù)說(shuō)明:_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;
}
}
});
});
}

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插件開(kāi)發(fā)基礎(chǔ)簡(jiǎn)單介紹

    jQuery插件開(kāi)發(fā)基礎(chǔ)簡(jiǎn)單介紹

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

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

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

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

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

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

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

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

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

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

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

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

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

    jQuery中appendTo()方法用法實(shí)例

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

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

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

    jquery ajax請(qǐng)求實(shí)例深入解析

    jquery中封裝了一些ajax請(qǐng)求的方法,很實(shí)用,本文將以此引入一個(gè)實(shí)例,對(duì)jquery中ajax請(qǐng)求的方法進(jìn)行詳細(xì)介紹,需要了解更多的朋友可以參考下
    2012-11-11

最新評(píng)論