Как отключить свертывание строки таблицы кнопкой?

Question

Я установил колонтитул Bootstrap по щелчку строки таблицы.Теперь, если вы заметили, что коллапс можно открыть, щелкнув в любом месте строки, и это нормально, вот как я хочу.

Но я хочу одно исключение, если вы заметили, что в последнем столбце есть экран рабочего столастроки таблицы.Если я нажму на него, я не хочу, чтобы строка открылась. Свернуть Bootstrap.

Есть ли способ, как мне этого добиться?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin=" anonymous"></script>


<table class="table">
  <thead class="table-header">
    <tr>
      <th scope="col"></th>
      <th scope="col">ID</th>
      <th scope="col">Name</th>
      <th scope="col">Type</th>
      <th scope="col">Status <span class="badge badge-danger profile-verification-noti">4</span></th>
      <th scope="col">Last Login</th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-chevron" data-toggle="collapse" data-target="#AccountDetails">
      <td><a href="javascript:void(1);" class="right-angle option-tab"><i class="fas fa-angle-right"></i></a></td>
      <td>[0708]</td>
      <td>Mark Jonas</td>
      <td>Guest</td>
      <td class="success">Active</td>
      <td>22/11/2018</td>
      <td><a href="http://google.com" target="_blank" class="fa-user-imp-text"><i class="fas fa-desktop"></i></a></td>
    </tr>

    <!-- Table Row 1 Collapse -->
    <tr>
      <td class="insert-here coll-bg" colspan="8">
        <!-- START OF COMPLETE ACCOUNT SETTINGS -->
        <div class="collapse" id="AccountDetails">
          <p>Hello World</p>
        </div>

Answer 1

Вы можете попробовать Event​.stop​Propagation() на последних td до , чтобы предотвратить дальнейшее распространение текущего события в фазах захвата и всплытия .

$('tr td:last-child').click(function (e) {
  e.stopPropagation();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin=" anonymous"></script>


<table class="table">
  <thead class="table-header">
    <tr>
      <th scope="col"></th>
      <th scope="col">ID</th>
      <th scope="col">Name</th>
      <th scope="col">Type</th>
      <th scope="col">Status <span class="badge badge-danger profile-verification-noti">4</span></th>
      <th scope="col">Last Login</th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-chevron" data-toggle="collapse" data-target="#AccountDetails">
      <td><a href="javascript:void(1);" class="right-angle option-tab"><i class="fas fa-angle-right"></i></a></td>
      <td>[0708]</td>
      <td>Mark Jonas</td>
      <td>Guest</td>
      <td class="success">Active</td>
      <td>22/11/2018</td>
      <td><a href="http://google.com" target="_blank" class="fa-user-imp-text"><i class="fas fa-desktop"></i></a></td>
    </tr>

    <!-- Table Row 1 Collapse -->
    <tr>
      <td class="insert-here coll-bg" colspan="8">
        <!-- START OF COMPLETE ACCOUNT SETTINGS -->
        <div class="collapse" id="AccountDetails">
          <p>Hello World</p>
        </div>