JavaScript - Строка таблицы кликабельная, кроме последних 2 столбцов

Question

Я хочу сделать свои строки таблицы доступными для нажатия, однако у меня есть кнопка в каждом из последних двух столбцов (редактировать и удалить), каждый из которых открывает модальное окно.

<!-- 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', а также показывает 'ModuleID' и 'ModuleTitle' в URL-адресе ... но не позволяет кнопкам в последних 2 столбцах открывать свои модальные окна, а вместо этого перенаправляет их на 'moduleview. php '. Я пробовал использовать следующую строку, но никак не могу заставить ее работать. Есть ли строка кода, которую мне не хватает там, где она должна быть?

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

Я знаю, что подобные вопросы уже задавались, но я застрял на этом несколько дней и пытался использовать аналогичные решения с не повезло. Как я могу заставить строку открывать 'moduleview. php' при щелчке, одновременно показывая 'ModuleID' и 'ModuleTitle' в URL-адресе ... но, с другой стороны, по-прежнему позволять открывать кнопки в последних 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();
});

Это запустит модальное окно, а также предотвратит щелчок по строке. загорелся. Вы можете повторить код для другой кнопки. Кстати, вам лучше даже использовать идентификатор на кнопке вместо класса на случай, если у вас есть другие кнопки с аналогичным классом, которые не должны вести себя таким образом.