javascript - 如何使整个表格可点击并在点击时添加颜色？

我有一个表格，点击直 Angular 插入符号可折叠>，所以我希望折叠可点击操作发生在行上，而不是仅发生在 Angular 上。

其次，我希望在同一次点击时将表格颜色更改为#E1E2E2。

该表是使用 Bootstrap 类制作的。

我需要一些绝望的帮助。有人可以帮忙吗？

$(document).on("click",".option-tab",function(){
	if($(this).children().hasClass("fa-angle-right")){
		$(this).children().removeClass("fa-angle-right");
        $(this).children().addClass("fa-angle-down"); 
    }
    else
    {
        $(this).children().removeClass("fa-angle-down");
        $(this).children().addClass("fa-angle-right");
    }
});

.table td, 
.table th {
    padding-left: 1.75rem;
}

.table-header {
    background-color: #28283e;
    color: #f9f9f9;
}

.accounts-table:hover{ 
   background-color: #fafafa;
}

a.right-angle {
    color: orange;
}

    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></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">

            
            <table class="table">
              <!-- Table Headings -->
              <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>
                <!-- Table Row 1 -->
                <tr class="accounts-table">
                  <td>
                  <a href="#" class="right-angle option-tab" data-toggle="collapse" data-target="#AccountDetails"><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="#" 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">
                   <div class="collapse" id="AccountDetails">
                  <p>Hello World</p>
                  </div>
                </td>
              </tr>

                <!-- Table Row 2 -->
                <tr class="accounts-table">
                  <td><i class="fas fa-angle-right"></i></td>
                  <td>[2589]</td>
                  <td>John Smith</td>
                  <td>Guest</td>
                  <td class="danger">Disabled</td>
                  <td>N/A</td>
                  <td><a href="#" class="fa-user-imp-text"><i class="fas fa-desktop"></i></a></td>
                </tr> 
                <!-- Table Row 3 -->
                <tr class="solid-rows">
                  <td><i class="fas fa-angle-right"></i></td>
                  <td>[9147]</td>
                  <td>Murray Loius</td>
                  <td>Guest + Host</td>
                  <td class="warning">Pending Email</td>
                  <td>N/A</td>
                  <td><a href="#" class="fa-user-imp-text"><i class="fas fa-desktop"></i></a></td>
                </tr> 
              </tbody><!-- END OF TABLE BODY -->
            </table><!-- END OF TABLE -->

最佳答案

I want the collapse clickable action on the complete table instead of the angle only...
Secondly, I want the row color to be changed to #E1E2E2

将 data-toggle="collapse"data-target="#AccountDetails" 从包裹 Angular 图标的 anchor 移动到 tr... 所以 tr 将使用 Bootstrap 内置功能切换隐藏行。无需额外的代码即可执行此操作。

但是，您需要一些代码来在向右和向下之间切换 Angular ...并更改行颜色。请参阅下面的代码段。

// Whole table click handler
$(document).on("click", ".accounts-table", function(e) {

  // Find this row angle
  var angle = $(this).find(".option-tab i");
  
  // Find all other angles
  var other_angles = $(".option-tab i").not(angle);
  
  // Reset all rows color to white
  $(".accounts-table").css({"background-color":"white"});
  
  // Set the "active" color on this row
  $(this).css({"background-color": (angle.hasClass("fa-angle-right") ? "#E1E2E2" :"white") });
  
  // Reset all other angles to right
  other_angles.removeClass("fa-angle-down").addClass("fa-angle-right");
  
  // Toggle this angle
  angle.toggleClass("fa-angle-right fa-angle-down");

});

.table td,
.table th {
  padding: 0 0.5rem 0 1.25rem !important;  /* Changed the padding here */
}

.table-header {
  background-color: #28283e;
  color: #f9f9f9;
}

.accounts-table:hover {
  background-color: #fafafa;
}

a.right-angle {
  color: orange;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></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">


<table class="table">
  <!-- Table Headings -->
  <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>
    <!-- Table Row 1 -->
    <tr class="accounts-table" data-toggle="collapse" data-target="#AccountDetails1, .collapse.show">
      <td>
        <a href="#" 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="#" 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">
        <div class="collapse" id="AccountDetails1">
          <p>Hello World</p>
        </div>
      </td>
    </tr>

    <!-- Table Row 2 -->
    <tr class="accounts-table" data-toggle="collapse" data-target="#AccountDetails2, .collapse.show">
      <td><a href="#" class="right-angle option-tab" ><i class="fas fa-angle-right"></i></a></td>
      <td>[2589]</td>
      <td>John Smith</td>
      <td>Guest</td>
      <td class="danger">Disabled</td>
      <td>N/A</td>
      <td><a href="#" class="fa-user-imp-text"><i class="fas fa-desktop"></i></a></td>
    </tr>
    <!-- Table Row 2 Collapse -->
    <tr>
      <td class="insert-here coll-bg" colspan="8">
        <div class="collapse" id="AccountDetails2">
          <p>Hello World</p>
        </div>
      </td>
    </tr>
    
    <!-- Table Row 3 -->
    <tr class="accounts-table" data-toggle="collapse" data-target="#AccountDetails3, .collapse.show">
      <td><a href="#" class="right-angle option-tab" ><i class="fas fa-angle-right"></i></a></td>
      <td>[9147]</td>
      <td>Murray Loius</td>
      <td>Guest + Host</td>
      <td class="warning">Pending Email</td>
      <td>N/A</td>
      <td><a href="#" class="fa-user-imp-text"><i class="fas fa-desktop"></i></a></td>
    </tr>
    <!-- Table Row 3 Collapse -->
    <tr>
      <td class="insert-here coll-bg" colspan="8">
        <div class="collapse" id="AccountDetails3">
          <p>Hello World</p>
        </div>
      </td>
    </tr>
  </tbody>
  <!-- END OF TABLE BODY -->
</table>
<!-- END OF TABLE -->

编辑

我将 .collapse.show 添加到 data-target 属性中……所以它会切换(关闭)任何显示的可折叠行……这就是窍门!

我删除了颜色切换...所以它在关闭时留下灰色。
我还触及了关于行填充的 CSS 规则......它认为这样更可爱......但这只是一个建议。 ;)

确保为要切换的目标使用唯一的 id。

关于javascript - 如何使整个表格可点击并在点击时添加颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55073329/

javascript - 如何使整个表格可点击并在点击时添加颜色？

上一篇：html - Flex 元素不会正确包裹和收缩

下一篇：css - css/sass 中样式切换开关的问题