Question

根据评论进行了编辑

点击左侧表格的每一行时，需要在两个表格之间显示一个箭头（作为响应）

搜索时获得此链接

因此使用它进行了如下所示的小更改

<html>
<style>
  #output {position: absolute;
    visibility: hidden;
  position: absolute;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 14px solid yellow;
  };
  </style>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<body>
    <div class="col-lg-6 col-md-6">
    <table id="mTable" class="table table-hover table-bordered table-sieve"    >
        <thead><th >Name</th><th >Department</th></thead>
          <tbody>
          <tr>
          <td ><span style="cursor:default"><a  id="showdata"  class="datalink" detail="Cell: #emp_cell# ">    #emp_namefirst#</td>
          <td >#dept_name# </td>
          </tr>
          <tr>
          <td ><span style="cursor:default"><a  id="showdata"  class="datalink" detail="Cell: #emp_cell# ">    #emp_namefirst#</td>
          <td >#dept_name# </td>
          </tr>
          <tr>
          <td ><span style="cursor:default"><a  id="showdata"  class="datalink" detail="Cell: #emp_cell# ">    #emp_namefirst#</td>
          <td >#dept_name# </td>
          </tr>
          </tbody>
   </table>
  </div>
  <div class="col-lg-6 col-md-6 ">
   <table id="mTable" class="table table-hover table-bordered table-sieve"    >
      <thead><th >Name</th><th >Department</th></thead>
        <tbody>
        <tr>
        <td ><span style="cursor:default"><a  id="showdata"  class="datalink" detail="Cell: #emp_cell# ">    #emp_namefirst#</td>
        <td >#dept_name# </td>
        </tr>
        <tr>
        <td ><span style="cursor:default"><a  id="showdata"  class="datalink" detail="Cell: #emp_cell# ">    #emp_namefirst#</td>
        <td >#dept_name# </td>
        </tr>
        <tr>
        <td ><span style="cursor:default"><a  id="showdata"  class="datalink" detail="Cell: #emp_cell# ">    #emp_namefirst#</td>
        <td >#dept_name# </td>
        </tr>
        </tbody>
 </table>
</div>
   <div id="output"></div>
  <script>
   $(document).ready(function() {
         $('a.datalink').click(function () {  
            $('#output').css('top',$(this).offset().top);
            $('#output').css('left',($(this).offset().left + parseInt($("#mTable").css('width'))));
            $("#output").css('visibility','visible');
        });
    });
  </script>
</body>

</html>

除了响应能力外，其他一切都按预期进行，单击tr时会显示箭头，如何使箭头响应？到目前为止，它的位置是固定的

Bigger screen result Smaller screen result

Answer 1

您可以使用CSS Pseudo-classes在单击时在每一行上显示箭头。

$(document).ready(function() {
  $('a.datalink').click(function() {
$(this).closest('tr').addClass('active').siblings('tr').removeClass('active');
  });
});

tr.active:after {
  content: '';
  position: absolute;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 14px solid red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<div class="container">
  <div class="col-lg-6 col-md-6">

    <table id="mTable" class="table table-hover table-bordered table-sieve">
      <thead>
        <th>Name</th>
        <th>Department</th>
      </thead>
      <tbody>
        <tr>
          <td><span style="cursor:default"><a  id="showdata"  class="datalink" detail="Cell: #emp_cell# ">#emp_namefirst#</a></span></td>
          <td>#dept_name# </td>
        </tr>
        <tr>
          <td><span style="cursor:default"><a  id="showdata"  class="datalink" detail="Cell: #emp_cell# ">#emp_namefirst#</a></span></td>
          <td>#dept_name# </td>
        </tr>
        <tr>
          <td><span style="cursor:default"><a  id="showdata"  class="datalink" detail="Cell: #emp_cell# ">    #emp_namefirst#</a></span></td>
          <td>#dept_name# </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="col-lg-6 col-md-6 ">
    <table id="mTable" class="table table-hover table-bordered table-sieve">
      <tr>
        <th>Phone Number</th>
        <th>Grade</th>
      </tr>
      <tbody>
        <tr>
          <td><span style="cursor:default"> 123456789</span></td>
          <td>A </td>
        </tr>
        <tr>
          <td><span style="cursor:default"> 123456789</span></td>
          <td>B</td>
        </tr>
        <tr>
          <td><span style="cursor:default"> 123456789</span></td>
          <td>C </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

两张桌子之间的响应箭头

1 个答案: