Javascript：当其中一个单元格为空时隐藏表格行。 wordpress 页面

Question

我有一个网页，您可以在其中填写表格以在新页面上生成工作许可证，您可以在其中签名。 表单页面： https : //www.sdxworkpermit.se/work-permit/ 最后有一些问题作为清单（只有一个 atm），如果您不回答问题，我希望该功能不会出现下一个生成的页面。

如果电子签名文档页面上的<td>为空，我尝试添加 javascript 以隐藏<tr> 。 我有预先填写的文件供您查看：

回答问题时： https : //www.sdxworkpermit.se/e-signature-document/?invite=7fe56912485ecd0b40d130ffe47ba380c55c04b2&csum=2d1b0d3b4dd89625958cccb414b87f7f

当您不回答时： https : //www.sdxworkpermit.se/e-signature-document/?invite=5d1aee3de1e448064bffb6de58f6fc979c763bec&csum=2c8b2b8fd869f6e8a0fe0d10b7878d

Javascript（添加到插件页面模板：index.php）

<script>
    function isEmptyTable(myId){
    let tds = document.getElementsByClassName(myId);
    let hide = false
    for (let element of tds) {
      if (element.innerHTML.length == 0) hide = true
    }
    let myTable = document.getElementById(myId);
    if (hide) myTable.style.display = 'none';
}
isEmptyTable("myTable")
</script>

HTML（添加到 wordpress 文档页面）

<table id="myTable">
<tbody>
<tr>
<td>1</td>
<td>[esigcf7 formid="409" field_id="menu-936" ]</td>
</tr>
<tr>
<td>2</td>
<td>[esigcf7 formid="409" field_id="checkbox-138" ]</td>
</tr>
</tbody>
</table>

Answer 1

隐藏桌子

document.querySelector('#myTable td:empty').closest('#myTable').style.display = "none";

隐藏行

document.querySelector('#myTable td:empty').parentElement.style.display = "none";

秘制酱料

：空的

这可能会更好：

一篇解释如何创建 dom-changed 事件的文章

const observer = new MutationObserver( list => {
  const evt = new CustomEvent('dom-changed', {detail: list});
  document.body.dispatchEvent(evt)
});
observer.observe(document.body, {attributes: true, childList: true, subtree: true});

document.body.addEventListener('dom-changed', () => {
   const cell = document.querySelector('#myTable td:empty');
   if ( cell ) cell.parentElement.style.display = "none";
});