Question

I have a table placed inside the <td>. I want to change the border width of the table to ZERO if the td is empty, using JQuery. The JQuery seems to be not working. Please correct.

$(function () {
  $('tr[id*="trInner"] td:empty').css('border-width', '0px'); 
});

This is how the rendered Html looklike

<tr id ="trInner">
    <td class="GrayTable"> 
      <table id="MainContent_DlReviewImages" cellspacing="0" cellpadding="15" dList="dlAttachment" style="border-collapse:collapse;">
        <tr>
          <td>
             <table cellspacing="30px" >
               <tr>
                 <td colspan="2">
                   <table cellspacing="0" cellpadding="0" border="0" class="tableborder">
                      <tr>
                         <td align="center">
                            <a href="\\Day\Cl\Clms\P025175_43920471.jpg" id="MainContent_DlReviewImages_AImage_0" target="_blank">
                            <img src="\\Day\Cl\Clms\thumbnails\P025175_43920471.jpg" id="MainContent_DlReviewImages_ThumbnailReviewImage_0" width="250" height="200" border="0" />
                             </a>
                          </td>
                       </tr>
                    </table>
                </td>
              </tr>
      </table>
     </td>
    </tr>
    </table>
  </td>
</tr>

Thanks

BB

Answer 1

If I understand you correctly, you would need the following code:

$(document).ready(function () {
    $('#trInner td:empty').parent().parent().css('borderWidth','0px');
});

This changes the border-width of the table containing the empty td, within any #trInner. The parent functions make sure the table is selected and not the empty td.

Hope this helps.