-
寻找AWM 小试身手Lv3
发表于2019-7-18 17:03
楼主
本帖最后由 寻找AWM 于 2019-7-22 07:26 编辑
需求:一个分析表某一行中有多个浮动区,每个浮动区是互斥的。每个浮动区域浮动出的数据行数都是不一样的,就会导致数据少的会产生空白的表元,感觉不太美观。想要将冗余的空白表元给隐藏或则边框给去掉;实现方式:
1、将相关表格相关区域边框去掉
2、用客户端脚本给这块区域画边框
脚本如下复制代码
3、表样,及展示效果
需求:一个分析表某一行中有多个浮动区,每个浮动区是互斥的。每个浮动区域浮动出的数据行数都是不一样的,就会导致数据少的会产生空白的表元,感觉不太美观。想要将冗余的空白表元给隐藏或则边框给去掉;实现方式:
1、将相关表格相关区域边框去掉
2、用客户端脚本给这块区域画边框
脚本如下
- var grid=document.getElementById("GRID1");
- var row=grid.getElementsByTagName("tr");
- for(var i=0;i<row.length;i++){
- var td=row[i].getElementsByTagName("td");
- for(var j=0;j<td.length;j++){
- var txt=td[j].getElementsByTagName("span")[0].innerHTML;
- if(i==0&&txt){
- td[j].style.borderTop='1px solid';
- td[j].style.borderBottom='1px solid';
- }else if(txt){
- td[j].style.borderBottom='1px solid';
- }
-
- if(j==0 && txt){
- td[j].style.borderLeft='1px solid';
- }else if((j==1 || j==3) && txt){
- td[j].style.borderRight='1px solid';
- }
-
- if(j==2){
- var txt1=td[j-1].getElementsByTagName("span")[0].innerHTML;
- //var px1=td[j-1].style.borderRight;
- if(txt || !txt1){
- td[j-1].style.borderRight='1px solid';
- }else if(!txt || txt1){
- td[j-1].style.borderRight='1px solid';
- }
- }
- }
- }
3、表样,及展示效果