去掉表元浮动后冗余的空白表元

2557
1

寻找AWM 小试身手Lv3

发表于2019-7-18 17:03

楼主
本帖最后由 寻找AWM 于 2019-7-22 07:26 编辑

需求:一个分析表某一行中有多个浮动区,每个浮动区是互斥的。每个浮动区域浮动出的数据行数都是不一样的,就会导致数据少的会产生空白的表元,感觉不太美观。想要将冗余的空白表元给隐藏或则边框给去掉;实现方式:
1、将相关表格相关区域边框去掉
2、用客户端脚本给这块区域画边框
脚本如下
  1. var grid=document.getElementById("GRID1");
  2. var row=grid.getElementsByTagName("tr");
  3. for(var i=0;i<row.length;i++){
  4.         var td=row[i].getElementsByTagName("td");
  5.         for(var j=0;j<td.length;j++){
  6.                 var txt=td[j].getElementsByTagName("span")[0].innerHTML;
  7.                 if(i==0&&txt){
  8.                         td[j].style.borderTop='1px solid';
  9.                         td[j].style.borderBottom='1px solid';
  10.                 }else if(txt){
  11.                         td[j].style.borderBottom='1px solid';
  12.                 }
  13.                
  14.                 if(j==0 && txt){
  15.                         td[j].style.borderLeft='1px solid';
  16.                 }else if((j==1 || j==3) && txt){
  17.                         td[j].style.borderRight='1px solid';
  18.                 }
  19.                
  20.                 if(j==2){
  21.                         var txt1=td[j-1].getElementsByTagName("span")[0].innerHTML;
  22.                         //var px1=td[j-1].style.borderRight;
  23.                         if(txt || !txt1){
  24.                                 td[j-1].style.borderRight='1px solid';
  25.                         }else if(!txt || txt1){
  26.                                 td[j-1].style.borderRight='1px solid';
  27.                         }
  28.                 }
  29.         }
  30. }
复制代码


3、表样,及展示效果




最近看过此主题的会员

@bert

刘兰芳

chestnut

1个回答

只看楼主

辰哥 管理员

发表于2019-12-5 15:06

只看该作者

取消 关注该作者的回复

沙发

学习了!

登录后可回答问题,请登录注册

快速回复 返回顶部 返回列表

小时

全天响应

分钟

快速处理问题

工程师强势助力

明星产品
解决方案
联系合作

400咨询:400-0011-866

技术支持QQ:400-0011-866(工作日9:00-18:00)

产品建议邮箱yixin@esensoft.com

关注我们

扫TA学习更多干货

一对一专家交流

版权所有© 2006-2024 北京亿信华辰软件有限责任公司 京ICP备07017321号 京公网安备11010802016281号