How do I toggle <td> 'table data cells' in Javascript?

Question

So I need to be able to click to show/hide table data cells, however, after trying multiple functions for toggling their display I've been unable to progress forward in my attempts.

Although I've tried several different functions I keep getting the same error: Uncaught ReferenceError: toggle_visibilityOn is not defined at HTMLTableCellElement.onclick

Here is the latest iteration of my code in PHP.

if($job_type != 'Maintenance'){ ?> 
                                        <tr>
                                            <!--<td><a href="edit-job-2.php?job=<?php echo $job_id; ?>">-->
                                            <td onclick = "toggle_visibilityOn(<?php echo $job_id; ?>)"><?php echo $job_id; ?>

                                            <td id = "billingticket<?php echo $job_id; ?>"><?php echo $billing_ticket; ?></td>
                                            <td id = "billing_status<?php echo $billing_status; ?>"><?php echo $billing_status; ?></td>
                                            <td id = "job_date<?php echo $job_date; ?>"></td>
                                            <td id = "drilling_contractor<?php echo $drilling_contractor; ?>"><?php echo $drilling_contractor; ?></td>
                                            <td id = "job_type<?php echo $job_type; ?>"><?php echo $job_type; ?></td>
                                            <td id = "lease_name<?php echo $lease_name; ?>"><?php echo $lease_name; ?></td>
                                            <td id = "job_status<?php echo $job_status; ?>"><?php echo $job_status; ?></td>
                                            </td>
                                        <tr>



                            <?php   }

I have commented out the previous attempts. Here is the Javascript portion of the code:

    function toggle_visibilityOn()
{
    document.getElementById("billing_status<?php echo $billing_status; ?>").style.display = "block";
    document.getElementById("job_date<?php echo $job_date; ?>").style.display = "block";
    document.getElementById("drilling_contractor><?php echo $drilling_contractor; ?>").style.display = "block";
    document.getElementById("job_type<?php echo $job_type; ?>").style.display = "block";
    document.getElementById("lease_name<?php echo $lease_name; ?>").style.display = "block";
    document.getElementById("job_status<?php echo $job_status; ?>").style.display = "block";
    document.getElementById("billingticket<?php echo $job_id; ?>").setAttribute('onclick','toggle_visibilityOff()');
    document.getElementById("billingticket<?php echo $job_id; ?>");
}

function toggle_visibilityOff()
{
    document.getElementById("billing_status<?php echo $billing_status; ?>").style.display = "none";
    document.getElementById("job_date<?php echo $job_date; ?>").style.display = "block";    
    document.getElementById("drilling_contractor<?php echo $drilling_contractor; ?>").style.display = "block";  
    document.getElementById("job_type<?php echo $job_type; ?>").style.display = "none";
    document.getElementById("lease_name<?php echo $lease_name; ?>").style.display = "none";
    document.getElementById("job_status<?php echo $job_status; ?>").style.display = "none";
    document.getElementById("billingticket<?php echo $job_id; ?>").setAttribute('onclick','toggle_visibilityOn()');
    document.getElementById("billingticket<?php echo $job_id; ?>");

}

I know I'm doing something wrong, and I'm almost sure it has to do with the Id tags, but I'm no closer to figuring it out than I was two days ago.

Note: I'm fixing and editing preexisting code so I'm not familiar with everything that's going on. I'm aware the answer may lie elsewhere.

To anyone who reads this: Thank you for your time.

Answer 1

There is a lot we can do to make this better. First, you shouldn't echo the jobID in the javascript -- you should pass the value via the onClick method. Next, we can combine both of your toggle methods into one simplified version. Lastly, unless you want your table columns to be stacked, you won't want to use display: block for the toggleOn -- use display: inline-block or display: inline .

Here's an example with your PHP removed so that it can demonstrate the functionality of the javascript.

 function toggle_visibility(jobID) { const billingTicket = document.getElementById("billingticket" + jobID); const style = (billingTicket.style.display === "none") ? "inline-block" : "none"; billingTicket.style.display = style; document.getElementById("billing_status" + jobID).style.display = style; document.getElementById("job_date" + jobID).style.display = style; document.getElementById("drilling_contractor" + jobID).style.display = style; document.getElementById("job_type" + jobID).style.display = style; document.getElementById("lease_name" + jobID).style.display = style; document.getElementById("job_status" + jobID).style.display = style; }

 <table> <tr> <td onclick="toggle_visibility(5)">JOBID 5</td> <td id="billingticket5">Billing Ticket</td> <td id="billing_status5">Billing Status</td> <td id="job_date5">Job Date</td> <td id="drilling_contractor5">Drilling Contractor</td> <td id="job_type5">Job Type</td> <td id="lease_name5">Lease Name</td> <td id="job_status5">Job Status</td> </tr> </table>

Just put your PHP back into the table structure here and you should be good to go.

---

If this is exactly how you want the data in your table to be laid out, we can simplify this even more:

 function toggle_visibility(element) { [...element.parentNode.children].splice(1).forEach(column => { column.style.display = column.style.display === 'none' ? "inline-block" : "none"; }); }

 <table> <tr> <td onclick="toggle_visibility(this)">JOBID 5</td> <td>Billing Ticket</td> <td>Billing Status</td> <td>Job Date</td> <td>Drilling Contractor</td> <td>Job Type</td> <td>Lease Name</td> <td>Job Status</td> </tr> </table>

This is even better because it doesn't require the elementID's, and so you also won't need to clutter your PHP file with all those echos .

What I'm doing here is using the context of this to pass in the element that was clicked. Then we get an array of the element's siblings by using spread syntax to create an array from the children object of the parentNode , and splice the array to remove the first child from the array, leaving us with an array that contains all of the siblings of the element that was clicked. Finally we loop through each member of the array to toggle the display style of each sibling.

---

If you need a button that can toggle all of these types of rows, try this example:

 function toggle_visibility(element) { [...element.parentNode.children].splice(1).forEach(column => { column.style.display = column.style.display === 'none' ? "inline-block" : "none"; }); //check if all rows are hidden/shown to update button label let comparison, shouldUpdateButtonLabel = true, rows = document.getElementsByTagName("tr"); [...rows].forEach(row => { if (!comparison) comparison = row.children[1].style.display; else if (row.children[1].style.display !== comparison) shouldUpdateButtonLabel = false; }); if (shouldUpdateButtonLabel) { let button = document.getElementById("toggleAll"); button.innerHTML = button.innerHTML === "Hide All" ? "Show All" : "Hide All"; } } function toggleAll(button) { const style = button.innerHTML === "Hide All" ? "none" : "inline-block"; button.innerHTML = button.innerHTML === "Hide All" ? "Show All" : "Hide All"; let rows = document.getElementsByTagName("tr"); [...rows].forEach(row => { [...row.children].splice(1).forEach(column => { column.style.display = style; }); }); }

 td { display: inline-block; }

 <table> <tr> <td onclick="toggle_visibility(this)">JOBID 5</td> <td>Billing Ticket</td> <td>Billing Status</td> <td>Job Date</td> <td>Drilling Contractor</td> <td>Job Type</td> <td>Lease Name</td> <td>Job Status</td> </tr> <tr> <td onclick="toggle_visibility(this)">JOBID 6</td> <td>Billing Ticket</td> <td>Billing Status</td> <td>Job Date</td> <td>Drilling Contractor</td> <td>Job Type</td> <td>Lease Name</td> <td>Job Status</td> </tr> <tr> <td onclick="toggle_visibility(this)">JOBID 7</td> <td>Billing Ticket</td> <td>Billing Status</td> <td>Job Date</td> <td>Drilling Contractor</td> <td>Job Type</td> <td>Lease Name</td> <td>Job Status</td> </tr> </table> <button id="toggleAll" onclick="toggleAll(this)">Hide All</button>