我如何切换<td> Javascript中的“表格数据单元格”？

Question

因此，我需要能够单击以显示/隐藏表格数据单元格，但是，在尝试了多种功能来切换其显示后，我一直无法在尝试中取得进展。

尽管我尝试了几种不同的功能，但我一直收到相同的错误：未捕获的 ReferenceError：toggle_visibilityOn 未在 HTMLTableCellElement.onclick 中定义

这是我用 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   }

我已经注释掉了以前的尝试。 这是代码的 Javascript 部分：

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

}

我知道我做错了什么，而且我几乎可以肯定它与 Id 标签有关，但与两天前相比，我并没有更接近于弄清楚它。

注意：我正在修复和编辑预先存在的代码，所以我不熟悉正在发生的一切。 我知道答案可能在别处。

致阅读本文的任何人：感谢您的时间。

Answer 1

我们可以做很多事情来改善这一点。 首先，您不应该在 javascript 中echo显 jobID - 您应该通过 onClick 方法传递值。 接下来，我们可以将您的两种切换方法合并为一个简化版本。 最后，除非你希望你的表格列被堆叠起来，否则你不会想要使用display: block for toggleOn -- 使用display: inline-block或display: inline 。

这是一个删除了 PHP 的示例，以便它可以演示 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>

只需将您的 PHP 放回此处的表结构中，您就可以开始使用了。

---

如果这正是您希望表格中数据的布局方式，我们可以进一步简化：

 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>

这甚至更好，因为它不需要elementID的，所以你也不必搞乱你的PHP文件，所有这些echos 。

我在这里做的是使用this的上下文来传递被点击的元素。 然后我们通过使用spread语法从parentNode的children对象创建一个数组，并splice该数组以从数组中删除第一个子元素，从而得到一个元素的兄弟元素的数组，该数组包含所有元素的兄弟元素被点击的元素。 最后，我们遍历数组的每个成员以切换每个兄弟的显示样式。

---

如果您需要一个可以切换所有这些类型行的按钮，请尝试以下示例：

 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>