Javascript: Hide table row when one of its cell is empty. wordpress page

Question

I have a webpage where you fill a form to generate a work permit on a new page where you can sign it. form page: https://www.sdxworkpermit.se/work-permit/ There are questions as a checklist (only one atm) at the end and I want the function to be if you don't answer the question it wont appear at the next generated page.

I have tried to add javascript to hide the <tr> if the <td> is empty on the e-signature-document page. I have prefilled document for you to see:

When you answer the question: https://www.sdxworkpermit.se/e-signature-document/?invite=7fe56912485ecd0b40d130ffe47ba380c55c04b2&csum=2d1b0d3b4dd89625958cccb414b5f0f8e87e700d

When you don't answer: https://www.sdxworkpermit.se/e-signature-document/?invite=5d1aee3de1e448064bffb6de58f6fc979c763bec&csum=2c8b2b8fd869f6e8a0fe0d6878d610b67741778c

Javascript (added to plugins page-template: 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 (added to the word press document page)

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

Will · Accepted Answer · 2020-11-15 01:31:41Z

1

Hide the table

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

Hide the row

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

Secret Sauce

:empty

This might be better:

An article that explains how to create a dom-changed event

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

edited Nov 15, 2020 at 1:31

answered Nov 15, 2020 at 1:03

Will

3,2411 gold badge20 silver badges17 bronze badges

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

3 Comments

Tom Baeckstrom Over a year ago

Thank you. tried adding to index.php but got this:?esigpreview=1&document_id=25:53 Uncaught TypeError: Cannot read property 'parentElement' of null at ?esigpreview=1&document_id=25:53

Will Over a year ago

When the page loads, the table probably isn't there yet. This line would need to be run after the table is created. If you open the page console and paste it in, you should be able to see the table hide.

Tom Baeckstrom Over a year ago

Dude, got it to work now. placed the script in the end of the index.php. not in the head.Thank you! save me the weekend

Collectives™ on Stack Overflow

Javascript: Hide table row when one of its cell is empty. wordpress page

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related