时间戳

首页 > 解决方案 > Javascript：当其中一个单元格为空时隐藏表格行。WordPress 页面

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

问题描述

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

我试图添加 javascript 来隐藏电子签名文档页面上的<tr>是否为空。<td>我已经预先填写了文件供您查看：

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

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

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（添加到 word press 文档页面）

<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>

标签： javascriptphphtmljquery

解决方案

隐藏表格

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

推荐阅读