安庆网站建设
 网申首页   联系我们   加入收藏

联系安庆网络公司

网站建设
服务项目
联系我们
网站: 0556-8778040
短信: 0556-5371498
商务: 18714896998
邮箱: wm218@qq.com
地址: 安庆市石化亿和商务写字楼B座309室
当前位置: 首页 > 网站建设 > 行业资讯
【原创】合并表格中第一列中相同内容,实现同类型打印
Loading...

常在项目中打印汇表时,要求将同类型的,合并成一列,但在后台中常常考虑到打印分页问题,实现这个要求比较复杂。于是拿到前端来实现,效果不错,代码如下:


<script src="js/jquery.js"></script>
<div class="page">

<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>1</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>1</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>2</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>2</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>3</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>3</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>3</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>3</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

</div>

<script>
 $.each($(".page"),function(index,value){
  var obj = $(this),
   acIndex = 0,
   nextIndex = 1;
  
  $.each($(this).find("tr"),function(index,value){
   if(obj.find("tr").length==nextIndex) return;
   
   var acTd = obj.find("tr").eq(acIndex).find("td").eq(0);
    nextTd = obj.find("tr").eq(nextIndex).find("td").eq(0);
    
   if(acTd.text()==nextTd.text())
   {
    var i = acTd.attr("rowspan");
    typeof(i)=='undefined' ? i = 2 : i++;
    nextTd.remove();
    acTd.attr("rowspan",i);
    nextIndex = acIndex + i;
   }else{
    acIndex = nextIndex;
    nextIndex ++;
   }
  });
  
 });
</script>

 

简单的几行代码,解决了后端程序复杂的输出过程。原来程序也很艺术

 

上一篇: IIS禁止缓存设置下一篇: 没有了
安庆百度推广,安庆百度优化,安庆百度竞价 安庆网站摧广,安庆企业建站,安庆域名注册 安庆雅虎推广,安庆网站优化 安庆服务器托管,安庆虚拟主机,安庆网站空间 安庆网站建设 安庆短信群发,安庆短信群发公司
安庆百度推广 安庆谷歌摧广 安庆雅虎推广    安庆门户网站 安庆短信群发  安庆软件开发
 
网申介绍 | 网申新闻 | 联系网申 | 安庆网站制作 | 安庆网站推广 | 安庆短信群发 | 安庆装饰工程 | 安庆广告设计 | 安庆软件开发

版权所有: © 2002-2016 安庆网申文化传媒有限公司™   公司地址:安徽省安庆市石化亿和商务写字楼B座309室 (石化医院正面向北200米)

商务合作:18714896998 在线咨询: 点击这里给我发消息 公司邮箱:wm218@qq.com 皖ICP备11013986号 www.aqsos.com网站PR查询