JavaScript

Question

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

<!-- 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'... 但它阻止了最后两列中的按钮从打开他们的模式，而是将他们重定向到 'moduleview.php'。我尝试使用以下行，但似乎无法正常工作。有没有我遗漏的代码行？

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

我知道已经有人问过类似的问题，但我已经坚持了好几天，并尝试使用类似的解决方案，但没有成功。单击时如何让行打开 'moduleview.php' 同时在 URL 中显示 'ModuleID' 和 'ModuleTitle'... 但另一方面，仍然允许按钮最后 2 列打开他们的模式？

Answer 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 而不是 class，以防万一你有其他具有类似 class 的按钮，但不应该这样做。

JavaScript - 可点击 table 行，最后两列除外

JavaScript - Clickable table row except last 2 columns

row

html-table

click