时间戳

首页 > 解决方案 > 如何使用按钮禁用表格行的折叠？

javascript - 如何使用按钮禁用表格行的折叠？

问题描述

单击表格行时，我已经安装了 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>

标签： javascriptjqueryhtmltwitter-bootstrap

解决方案

您可以尝试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>

推荐阅读