JavaScript - Clickable table row except last 2 columns

Question

I want to make my table rows clickable, however I've got a button in each of the last 2 columns (edit and delete) which each open up a modal.

<!-- 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>

The above code redirects to 'moduleview.php', while also showing 'ModuleID' and 'ModuleTitle' in the URL... but it prevents the buttons in the last 2 columns from opening their modals, and instead redirects them to 'moduleview.php'. I have tried using the following line but just can't seem to get it to work. Is there a line of code I'm missing where this should be?

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

I know similar questions have been asked already but I've been stuck on this for days and have tried to use similar solutions with no luck. How can I get the row to open 'moduleview.php' when clicked while also showing 'ModuleID' and 'ModuleTitle' in the URL... but on the other hand, still allow the buttons in the last 2 columns to open their modals?

Answer 1

If i get you clearly, your problem is one of nested event handlers. The buttons can not open the modals because the parent's onclick listener has a default behavior which is supposed to be overridden. One approach that can work is to show modals via JQuery (as opposed to data-toggle).

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

This will fire up the modal and also prevent the onclick on the row to be fired up. You can repeat the code for the other button. By the way, you are better off even using an id on the button instead of a class just in case you have other buttons with similar class that shouldn't behave this way.