javascript - 如何在表格行中显示特定图标？

Question

我有一张桌子，每一行都有一个图标。当您单击该图标时，它应该显示另一个隐藏的图标。我的问题是当我点击这个图标时，它总是改变第一行，而不是我点击的图标所在的行。

这是我的功能：

$("#myTable").on('click', 'tbody tr #editAction', function () { 
    $('#deleteAction').show();
    $('#editAction').hide();
});

标签： javascripthtml

Answer 1

该属性id在文档中必须是唯一的，您可以使用它class来代替。您还必须使用this关键字定位当前元素。

演示：

$("#myTable").on('click', 'tbody tr .editAction', function () {
    $(this).closest('.deleteAction').show();
    $(this).hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td> 
      <td>50</td>
      <td class="deleteAction">delete</td>
      <td class="editAction">edit</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td> 
      <td>94</td>
      <td class="deleteAction">delete</td>
      <td class="editAction">edit</td>
    </tr>
  </tbody>
  
</table>