如果单元格为空，则隐藏单元格顶部边框

发布于 2024-12-19 06:46:13 字数 1291 浏览 1 评论 0原文

有一个 OfficeInfo 表，有两行，每行有两个单元格。底部第二行的每个单元格都有顶部边框，以奇特的方式划分顶部和底部行。如果左下单元格为空，我需要能够隐藏左边框；如果右下单元格为空，我需要隐藏右边框。这样，如果没有内容，就不会只有边框挂在那里没有理由..你如何使用 jquery 做到这一点？

<table class="OfficeInfo" border="0" style="width: 100%" cellspacing="10px" cellpadding="15px">
  <tr>
    <td class="Office1" style="width=40%">  
     <span class="OfficeName">
     Munster Women&#39;s Center<br />
     </span>
     <span class="Address">
     8075 North Shadeland Avenue,  <br />Indianapolis, IN 46250         
     </span> 
     <span class="Phone">
     (321) 223-1232</span><br />
     <a class="mapdirectionsLink" href="#">map &#38; directions&#62;</a><br /><br />
     <span class="Hours">
     MTW: 9:00 AM- 5:00 PM</span>
    </td>

    <td class="Office2" style="width:40%">  
    </td>
  </tr>                                       
  <tr>                                    
    <td class="Office3" style="border-top:1px dotted silver;  width:40%;">   
    </td>
    <td class="Office4" style="border-top:1px dotted silver;  width:40%">                           
    </td>
  </tr> 
 </table>

原文

there is an OfficeInfo table with two rows which have two cells in each. the bottom second row's each cell has top border dotted which divides the top and bottom row in fancy way. I need to be able to hide the left border if the bottom left cell is empty or hide the right border if the bottom right cell is empty..that way if there is no content, there will not be just the border hanging in there for no reason..how do you do this using jquery??

<table class="OfficeInfo" border="0" style="width: 100%" cellspacing="10px" cellpadding="15px">
  <tr>
    <td class="Office1" style="width=40%">  
     <span class="OfficeName">
     Munster Women's Center<br />
     </span>
     <span class="Address">
     8075 North Shadeland Avenue,  <br />Indianapolis, IN 46250         
     </span> 
     <span class="Phone">
     (321) 223-1232</span><br />
     <a class="mapdirectionsLink" href="#">map & directions></a><br /><br />
     <span class="Hours">
     MTW: 9:00 AM- 5:00 PM</span>
    </td>

    <td class="Office2" style="width:40%">  
    </td>
  </tr>                                       
  <tr>                                    
    <td class="Office3" style="border-top:1px dotted silver;  width:40%;">   
    </td>
    <td class="Office4" style="border-top:1px dotted silver;  width:40%">                           
    </td>
  </tr> 
 </table>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

∞觅青森が 2024-12-26 06:46:13

您可以使用 jquery :empty 选择器来定位空 TD 并更改边框 CSS 属性。假设最上面的两个单元格永远不为空，你可以这样做

 $('table.OfficeInfo td:empty').css('border', '0px');

You could use the jquery :empty selector to target the empty TD's and change the border CSS property. Assuming the top two cells are never empty you could do something like

 $('table.OfficeInfo td:empty').css('border', '0px');

回复收藏 0 原文

做个ˇ局外人 2024-12-26 06:46:13

您可以尝试此代码

  $('table.OfficeInfo tr:last > td').each(function(){ 
        if($.trim($(this).html()) == ""){
             $(this).css('border', '0px')
        }
  });

希望这有帮助

谢谢。

You can try this code

  $('table.OfficeInfo tr:last > td').each(function(){ 
        if($.trim($(this).html()) == ""){
             $(this).css('border', '0px')
        }
  });

Hope this helps

Thanks.

回复收藏 0 原文

~没有更多了~