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

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

所以我需要能够单击 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 标签有关,但我与两天前相比并没有更接近于弄清楚它。

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

致所有阅读本文的人:感谢您抽出宝贵时间。

我们可以做很多事情来让它变得更好。首先,您不应该 echo javascript 中的 jobID——您应该通过 onClick 方法传递该值。接下来,我们可以将您的两种切换方法合并为一个简化版本。最后,除非您希望堆叠 table 列,否则您不会希望将 display: block 用于 toggleOn——使用 display: inline-blockdisplay: 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 语法的上下文从 parentNodechildren 对象和 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>