JavaScript - 可点击的表格行，最后两列除外答案

【问题标题】：JavaScript - Clickable table row except last 2 columnsJavaScript - 可点击的表格行，最后两列除外
【发布时间】：2020-11-23 01:21:57
【问题描述】：

我想让我的表格行可点击，但是我在最后 2 列（编辑和删除）的每一列中都有一个按钮，每个都打开一个模式。

<!-- MODULE TABLE -->
<tr
  class="clickable-row"
  data-href="moduleview.php/'<?php echo $row['ModuleID'] . '=' . $row['ModuleCode'];?>'"
  onmouseover=""
  style="cursor: pointer" >

  <td> <?php echo $row['ModuleID']; ?> </td>
  <td> <?php echo $row['ModuleCode']; ?> </td>
  <td> <?php echo $row['ModuleTitle']; ?> </td>
  <td class="d-none"> <?php echo $row['TutorID']; ?> </td>
  <td> <?php echo $row['FirstName'] . " " . $row['LastName']; ?> </td>
  <td class="edit">
    <button type="button" class="btn btn-edit" style="font-size:16px"
      data-toggle="modal"
      data-target="#editmodule"
      aria-hidden="true">
      <i class="fas fa-edit"></i>
    </button>
  </td>
  <td class="delete">
    <button type="button" class="btn btn-delete" style="font-size:16px"
      data-toggle="modal"
      data-target="#deletemodule"
      aria-hidden="true">
      <i class="fas fa-trash-alt"></i>
    </button>
  </td>
</tr>


<!-- CLICKABLE ROWS SCRIPT -->
<script>
  $(".clickable-row").click(function () {
    window.document.location = $(this).data("href");
  });
</script>

上面的代码重定向到“moduleview.php”，同时还在 URL 中显示“ModuleID”和“ModuleTitle”...但是它阻止了最后 2 列中的按钮打开它们的模态，而是将它们重定向到'moduleview.php'。我尝试使用以下行，但似乎无法使其正常工作。我应该在哪里遗漏了一行代码？

td:not(:nth-last-child(-n+2))

我知道已经有人问过类似的问题，但我已经被这个问题困扰了好几天，并且尝试使用类似的解决方案，但没有成功。如何在单击时打开“moduleview.php”的行，同时在 URL 中显示“ModuleID”和“ModuleTitle”...但另一方面，仍然允许最后两列中的按钮打开它们的模态?

【问题讨论】：

标签： javascript html-table click row

【解决方案1】：

如果我明白你的意思，你的问题是嵌套事件处理程序之一。按钮无法打开模式，因为父级的 onclick 侦听器具有应该被覆盖的默认行为。一种可行的方法是通过 JQuery 显示模式（而不是数据切换）。

<td class="delete">
<button type="button" class="btn btn-delete" style="font-size:16px"
  aria-hidden="true">
  <i class="fas fa-trash-alt"></i>
</button>

$(".btn-delete").click(function(e) {
    $('#deletemodule').modal('show');
    e.stopPropagation();
});

这将启动模态并防止启动行上的 onclick。您可以重复其他按钮的代码。顺便说一句，你最好在按钮上使用 id 而不是类，以防万一你有其他类似类的按钮不应该这样做。

【讨论】：