Question

有一个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>

Answer 1

您可以使用jquery：empty选择器来定位空TD并更改边框CSS属性。假设前两个单元格从不为空，您可以执行类似

的操作

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

Answer 2

您可以尝试此代码

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

希望这有帮助

感谢。

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

2 个答案: