我如何切换 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

我们可以做很多事情来使它变得更好。首先，您不应该echo javascript中的jobID；您应该通过onClick方法传递值。接下来，我们可以将两种切换方法组合为一个简化版本。最后，除非要堆叠表列，否则不要将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重新放到此处的表结构中，您就应该很好了。

---

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

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，因此您也不需要将所有这些echos都弄乱PHP文件。

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

---

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

parentNode

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