如何在 Javascript 中切换 <td> 'table data cells'？

Question

所以我需要能够单击 show/hide table 数据单元格，但是，在尝试了多种功能来切换它们的显示之后，我的尝试一直无法取得进展。

尽管我尝试了几种不同的函数，但我总是遇到同样的错误：未捕获的 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

我们可以做很多事情来让它变得更好。首先，您不应该 echo javascript 中的 jobID——您应该通过 onClick 方法传递该值。接下来，我们可以将您的两种切换方法合并为一个简化版本。最后，除非您希望堆叠 table 列，否则您不会希望将 display: block 用于 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 放回 table 结构中，您就可以开始了。

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

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>

这甚至更好，因为它不需要元素 ID，因此您也不需要将所有这些 echos.

弄得乱七八糟的 PHP 文件

我在这里做的是使用 this to pass in the element that was clicked. Then we get an array of the element's siblings by using 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>

如何在 Javascript 中切换 <td> 'table data cells'？

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

html

javascript

php

mysql

show-hide