Question

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

这是我的功能：

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

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>

Answer 2

$('#deleteAction')在DOM中进行全局搜索，该搜索返回与ID匹配的第一个元素，确保DOM中的每个ID都是唯一的。

Answer 3

尝试实现以下类选择器

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

Answer 4

正如其他人所提到的，$('#deleteAction')将返回与该ID匹配的第一个元素。您应该使用类而不是使用ID。在页面上可以多次使用类，而不能在页面上使用ID。

下面的代码将隐藏单击的.editAction，然后在同一行中显示.deleteAction。

$("#myTable").on('click', 'tbody tr .editAction', function () {

    $(this).hide().closest("tr").find(".deleteAction").show();

});

明智地使用HTML，您需要将id="#editAction"替换为class="editAction"：

<tr>
    <td><img class="editAction"></td>
    <td><img class="deleteAction"></td>
</tr>

Answer 5

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <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>
</head>
<body>
<table class="table">
    <tr>
        <td>test1</td>
        <td>
            <button class="deleteAction">delete</button>
            <br>
            <button class="editAction">edit</button>

        </td>
    </tr>
    <tr>
        <td>test2</td>
        <td>
            <button class="deleteAction">delete</button>
            <br>
            <button class="editAction">edit</button>

        </td>
    </tr>
    <tr>
        <td>test3</td>
        <td>
            <button class="deleteAction">delete</button>
            <br>
            <button class="editAction">edit</button>

        </td>
    </tr>
</table>

<script type="text/javascript">
    $(document).on('click', '.editAction', function () {
        var cur = $(this);
        cur.parent().find('.editAction').hide();
        cur.parent().find('.deleteAction').show();

    });
</script>
</body>
</html>

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

5 个答案: