简体   繁体   中英

Hide table row if no data

I'm using Advanced Custom Fields in WordPress to create new content types. In my template, I have styled the text to be in a table layout like so:

<table class="members">
<thead>
</thead>
<tbody>
 <tr>
  <td>
   <h3>Basic Information</h3>
  </td>
 </tr>
 <tr>
  <td>
   <p><strong>Parent Organization:</strong> <?php the_field('parent_organization'); ?></p>
  </td>
</tr>
</tbody>
</table>

Now, if a member of the website has not put in their Parent Organization, I want to hide that entire row. I've looked at several other examples of how to do this in jQuery, but no answer is working. Since I'm using a child theme, I added a new functions.php AND my own child-theme-custom.js to my child theme folder.

Examples of three different attempts that did not work:

$('.members tr').filter(function(){
   return $(this).find('td:eq(1):empty').length > 0;
}).hide(); 

$('.members td').find('td:eq(1):empty').parent().hide();

$('.members > tbody  > tr').has('td:empty').hide()

First of all, the td is not empty because you are showing this whether or not the 'parent_organization' is present:

<p><strong>Parent Organization:</strong></p>

Thus the cell is not empty. Check out this fiddle for some fuel for your brain: http://jsfiddle.net/mx07d7fz/

Plus it is a good idea to make sure your DOM is ready as stated in the comment by user3558931.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM