`

table 合并表格

    博客分类：
  • js
 
阅读更多

 

  1. jquery-latest.js"
  2. !function($){  
  3.  $.fn.rowspan=function(options){  
  4.  var defaults = {}  
  5.  var options = $.extend(defaults, options);  
  6.  this.each(function () {  
  7.   
  8.  var tds=$(this).find("tbody td:nth-child("+options.td+")");  
  9.  var current_td=tds.eq(0);  
  10.  var k=1;  
  11.  tds.each(function(index, element) {  
  12.  if($(this).text()==current_td.text()&&index!=0){  
  13.  k++;  
  14.  $(this).remove();  
  15.  current_td.attr("rowspan",k);  
  16.  current_td.css("vertical-align","middle");  
  17.  }else{  
  18.  current_td=$(this);  
  19.  k=1;  
  20.  }  
  21.  });  
  22.   
  23.  })  
  24.  }  
  25. }( window.jQuery );  
  26. -------------------------------------------------------------------------------------------------------------------------
  27. html 页面
  28.   <html>
  29.   <head>
  30.   <script src="jquery-1.8.3.min.js"></script>
  31.    
  32. <script src="jquery-latest1.js"></script>    
  33. <script type="text/javascript">
  34.  $(document).ready(function(){
  35.  $("#my-table").rowspan({td:1});  
  36. });
  37.    </script>    
  38.   </head>
  39.     <body>
  40.     <table id="my-table" cellpadding="2" cellspacing="0" border="1">  
  41.      <thead>  
  42.      <tr>  
  43.      <th>姓名</th>  
  44.      <th>学科</th>  
  45.      <th>学分</th>  
  46.      </tr>  
  47.      </thead>  
  48.      <tbody>  
  49.      <tr>  
  50.      <td>小铭</td>  
  51.      <td>数学</td>  
  52.      <td>100</td>  
  53.      </tr>  
  54.      <tr>  
  55.      <td>小铭</td>  
  56.      <td>英语</td>  
  57.      <td>100</td>  
  58.      </tr>  
  59.      <tr>  
  60.      <td>小铭</td>  
  61.      <td>化学</td>  
  62.      <td>100</td>  
  63.      </tr>  
  64.      <tr>  
  65.      <td>小铭</td>  
  66.      <td>美术</td>  
  67.      <td>100</td>  
  68.      </tr>  
  69.      <tr>  
  70.      <td>小红</td>  
  71.      <td>数学</td>  
  72.      <td>100</td>  
  73.      </tr>  
  74.      <tr>  
  75.      <td>小红</td>  
  76.      <td>英语</td>  
  77.      <td>100</td>  
  78.      </tr>  
  79.      <tr>  
  80.      <td>小红</td>  
  81.      <td>化学</td>  
  82.      <td>100</td>  
  83.      </tr>  
  84.      <tr>  
  85.      <td>小红</td>  
  86.      <td>美术</td>  
  87.      <td>100</td>  
  88.      </tr>  
  89.      </tbody>  
  90.     </table>  
  91.     </body>
  92.     </html>
分享到：
| 汇总常用的jQuery操作Table tr td方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics