javascript - CSS 表 : How to position action buttons left to each row

Question

我有这个默认的响应式 Bootstrap 表:

<div class="table-responsive">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
</div>

如何在每行的右侧添加一个 div 或容器来显示一些操作按钮，如删除行、更新图标等？它们应该默认隐藏。当我将鼠标悬停在一行上时，它应该显示在该行的右边。不在表格内部，但顶部和底部应与给定表格行的位置和高度对齐。

我该如何解决这个问题？如果它不能单独使用 CSS 来完成，那么使用 jQuery/JavaScript 或类似的解决方案可能没问题。

Answer 1

试试下面的代码

$('tbody tr').hover(function(){
 $(this).find('td:last').show();
},function(){
  $(this).find('td:last').hide();
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
  .table-bordered-custom{
    border:0px;
    border-top:initial;
  }
  
  .table-bordered-custom thead th {
    border-top:1px solid #ddd !important;
  }
  .table-bordered-custom tbody td:last-child {
    border:0 !important;
    display:none;
  }
  </style>
<table style="margin:10px" class="table table-bordered table-bordered-custom">
  
      <thead>
        <tr>
          <th width="10%">#</th>
          <th width="25%">First Name</th>
          <th width="25%">Last Name</th>
          <th width="25%">Username</th>
          <th style="border:0 !important" ></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
          <td ><input type="button" value="X"> <input type="button" value="Edit"></td>
          
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
          <td ><input type="button" value="X"> <input type="button" value="Edit"></td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
          <td ><input type="button" value="X"> <input type="button" value="Edit"></td>
        </tr>
      </tbody>
    </table>