How to hide rows without values

Question

I have a registration form (wordpress, gravity forms plugin). A registrant fills in the form with name/s of attendees; attendees 1, attendees 2, and so on.

I will email the registrant a confirmation (using builtin email function of the wp plugin) with name of attendees with corresponding qr code for door access. What I did is prepare a table with column 1 for name of attendees (using merge tags of the plugin), and column 2 for corresponding qr codes, See image 1.

My problem is I want to auto hide the row (attendees name and qr code) when there is no values submitted on the form; say only 1 attendee is registered - no need to show the rows 2, 3, 4...and so on if there is no attendees 2,3,4, and so on submitted from the form.

Below is my present codes:

<table>
<tbody>
<tr>
<th><strong>Name of Attendee/s</strong></th>
<th><strong>QR Code - Door Pass</strong></th>
</tr>
<tr>
<td>{Attendee 1 (First):3.3} {Attendee 1 (Last):3.6}</td>
<td><img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl={Attendee 1 (First):3.3} {Attendee 1 (Last):3.6}&amp;choe=UTF-8" alt="Your unique QR code" width="200" height="200" /></td>
</tr>
<tr>
<td>{Attendee 2 (First):5.3} {Attendee 2 (Last):5.6}</td>
<td><img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl={Attendee 2 (First):5.3} {Attendee 2 (Last):5.6}&amp;choe=UTF-8" alt="Your unique QR code" width="200" height="200" /></td>
</tr>
<tr>
<td>{Attendee 3 (First):16.3} {Attendee 3 (Last):16.6}</td>
<td><img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl={Attendee 3 (First):16.3} {Attendee 3 (Last):16.6}&amp;choe=UTF-8" alt="Your unique QR code" width="200" height="200" /></td>
</tr>
<tr>
<td>{Attendee 4 (First):15.3} {Attendee 4 (Last):15.6}</td>
<td><img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl={Attendee 4 (First):15.3} {Attendee 4 (Last):15.6}&amp;choe=UTF-8" alt="Your unique QR code" width="200" height="200" /></td>
</tr>
<tr>
<td>{Attendee 5 (First):17.3} {Attendee 5 (Last):17.6}</td>
<td><img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl={Attendee 5 (First):17.3} {Attendee 5 (Last):17.6}&amp;choe=UTF-8" alt="Your unique QR code" width="200" height="200" /></td>
</tr>
</tbody>
</table>

Answer 1

The way I understand, what you are asking is if there is no value in the table column then you want to remove the whole row. so I googled and found this script and tried it on your table it works if there is empty column it will remove the whole row. Find more detail here

$(function(){
    $('tr').filter(
        function(){
            return $(this).find('td').length == $(this).find('td').filter(function(){
                    return $(this).text().trim() == '';
                }).length;
            }).hide();

        $("tr").filter(function() {
            return $(this).text() === "-";
        }).parent().hide();
    });