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

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ù)說(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;
        }
      }
    });
  });
}
$(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)容了，希望大家能夠喜歡。

相關(guān)文章

  • Jquery異步提交表單代碼分享

    Jquery異步提交表單代碼分享

    本文是jQuery結(jié)合ajax實(shí)現(xiàn)的異步提交表單的代碼，是個(gè)人項(xiàng)目中提取出來(lái)的，分享給大家，有需要的小伙伴可以參考下。
    2015-03-03
  • JQuery中g(shù)etJSON的使用方法

    JQuery中g(shù)etJSON的使用方法

    最近有一個(gè)活動(dòng)，其中的數(shù)據(jù)需要和純靜態(tài)html網(wǎng)站進(jìn)行交互。但是由于兩個(gè)網(wǎng)站處于不同的域名下，而Ajax的應(yīng)用中，由于安全的問(wèn)題，瀏覽器默認(rèn)是不支持跨域調(diào)用的，最后選用了JQuery中的getJSON方法
    2010-12-12
  • jQuery子選擇器與可見(jiàn)性選擇器實(shí)例分析

    jQuery子選擇器與可見(jiàn)性選擇器實(shí)例分析

    這篇文章主要介紹了jQuery子選擇器與可見(jiàn)性選擇器,結(jié)合實(shí)例形式分析了jQuery子選擇器與可見(jiàn)性選擇器的功能、常見(jiàn)用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
    2019-06-06
  • jquery實(shí)現(xiàn)仿新浪微博評(píng)論滾動(dòng)效果

    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-08
  • jQuery實(shí)現(xiàn)的鼠標(biāo)經(jīng)過(guò)時(shí)變寬的效果(附demo源碼)

    jQuery實(shí)現(xiàn)的鼠標(biāo)經(jīng)過(guò)時(shí)變寬的效果(附demo源碼)

    這篇文章主要介紹了jQuery實(shí)現(xiàn)的鼠標(biāo)經(jīng)過(guò)時(shí)變寬的效果,實(shí)例演示了jQuery的Kwicks插件實(shí)現(xiàn)針對(duì)鼠標(biāo)事件的響應(yīng)與頁(yè)面元素樣式動(dòng)態(tài)變換的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
    2016-04-04
  • Jquery倒數(shù)計(jì)時(shí)按鈕setTimeout的實(shí)例代碼

    Jquery倒數(shù)計(jì)時(shí)按鈕setTimeout的實(shí)例代碼

    這篇文章介紹了Jquery倒數(shù)計(jì)時(shí)按鈕setTimeout的實(shí)例，有需要的朋友可以參考一下
    2013-07-07
  • jQuery Flash/MP3/Video多媒體插件

    jQuery Flash/MP3/Video多媒體插件

    jQuery Flash/MP3/Video多媒體插件,主要是用來(lái)加載flash或mp3等網(wǎng)絡(luò)媒體文件。
    2010-01-01
  • 基于jquery實(shí)現(xiàn)后臺(tái)左側(cè)菜單點(diǎn)擊上下滑動(dòng)顯示

    基于jquery實(shí)現(xiàn)后臺(tái)左側(cè)菜單點(diǎn)擊上下滑動(dòng)顯示

    一個(gè)左側(cè)菜單點(diǎn)擊是可以上下滑動(dòng)，簡(jiǎn)潔時(shí)尚，復(fù)制即可使用，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助
    2013-04-04
  • jquery插件autocomplete用法示例

    jquery插件autocomplete用法示例

    這篇文章主要介紹了jquery插件autocomplete用法,結(jié)合實(shí)例形式分析了jQuery插件autocomplete與后臺(tái)交互實(shí)現(xiàn)搜索的自動(dòng)完成功能實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2016-07-07
  • jQuery點(diǎn)擊改變class并toggle及toggleClass()方法定義用法

    jQuery點(diǎn)擊改變class并toggle及toggleClass()方法定義用法

    這篇文章主要介紹了jQuery點(diǎn)擊改變class并toggle及toggleClass()方法定義用法的相關(guān)資料,需要的朋友可以參考下
    2015-12-12

最新評(píng)論