javascript - 如何隐藏没有值的行

Question

我有一个注册表单(wordpress、重力表单插件)。注册者填写表格并注明与会者姓名；与会者 1、与会者 2，依此类推。

我将通过电子邮件向注册者发送确认信息(使用 wp 插件的内置电子邮件功能)，其中包含与会者姓名以及相应的门禁二维码。我所做的是准备一个表格，其中第 1 列用于与会者姓名(使用插件的合并标签)，第 2 列用于相应的二维码，请参见图 1。

我的问题是，当表单上没有提交任何值时，我想自动隐藏该行(与会者姓名和二维码)；假设只有 1 位与会者注册 - 如果没有从表单提交的与会者 2、3、4 等，则无需显示第 2、3、4...行。

下面是我现在的代码:

<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

据我了解，您要问的是，如果表列中没有值，那么您想要删除整行。所以我用谷歌搜索并找到了这个脚本，并在你的 table 上尝试了它，如果有空列，它将删除整行。查找更多详情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();
    });