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

标签 javascript php html mysql show-hide

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

尽管我尝试了几种不同的函数，但我总是遇到同样的错误: 未捕获的 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 标签有关，但我与两天前相比并没有更接近于弄清楚它。

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

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

最佳答案

我们可以做很多事情来让它变得更好。首先，您不应该在 javascript 中echo jobID——您应该通过 onClick 方法传递该值。接下来，我们可以将您的两种切换方法合并为一个简化版本。最后，除非您希望您的表列被堆叠，否则您不会希望使用 display: block 来实现 toggleOn——使用 display: inline-block 或 显示:内联。

下面是一个示例，其中删除了您的 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 的上下文传入被点击的元素。然后我们通过使用 spread 得到元素的 sibling 的数组。语法从 parentNode 的 children 对象创建一个数组，拼接 数组以从数组中删除第一个 child ，留下我们包含被单击元素的所有兄弟项的数组。最后我们遍历数组的每个成员来切换每个兄弟的显示样式。

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

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 - 如何在 Javascript 中切换 <td> 'table data cells'？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59431733/

上一篇：javascript - 如何在字典中对 Javascript 数组进行排序

下一篇：javascript - 尝试使用 puppeteer 单击 iframe 中的按钮

相关文章：

javascript - 如何从使用 javascript 发布的表单中获取值

php - Laravel voyager - 需求无法解决

javascript - Google Dart 下拉可见性逻辑

html - 带按钮的 Angular 隐藏

javascript - session 后访问 session 用户名如何在其他 Controller 中进行身份验证

javascript - 处理对象参数

javascript - 范围问题/"Undefined is not a function"

php - 使用自定义端口号通过 SSL 发送文件 FTP

javascript - 如何在选项卡内添加分页

jquery - 如何使用 jquery 和 html 制作一个简单的模态弹出表单？

©2024 IT工具网  联系我们