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.

screenshot1

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>

I do not understand your Javascript. You do not have any .containerdivs, or inputs, or .column-halfs anywhere in the HTML. — CertainPerformance
– CertainPerformance, Commented Aug 31, 2019 at 2:48
I, too, doesn't understand above javascript but that works on my codes by emptying the row without values though the qr code column is still visible when I send the notification — arnold abutog
– arnold abutog, Commented Aug 31, 2019 at 3:02
forgetting the js (presuming your after that from an answerer), what do you mean by no values on it, in that html?, I see values :/ — Lawrence Cherone
– Lawrence Cherone, Commented Aug 31, 2019 at 3:18
Possible duplicate of Remove/ hide table row if all columns are empty — Kleber Germano
– Kleber Germano, Commented Aug 31, 2019 at 4:16

Umer Abbas · Accepted Answer · 2019-08-31 03:37:07Z

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();
    });

answered Aug 31, 2019 at 3:37

Umer Abbas

1,8763 gold badges16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to hide rows without values

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related