Question

我有一个HTML表格，每行有一个按钮。当我单击一个按钮时，它又显示了2个按钮，并且消失了。当我从另一行单击按钮时，我试图隐藏显示的按钮，但我不知道该怎么做。

这是我的功能代码

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

Answer 1

您应该将id更改为class，如果使用id，则仅第一行将应用事件。将您的代码更改为

 $(".editAction").click(function (e) {    
     $("tr").find(".deleteAction").hide();
     $("tr").find(".saveAction").hide();
     $("tr").find(".editAction").show();
      //show delete and save
     $(this).closest("tr").find(".deleteAction").show();
     $(this).closest("tr").find(".saveAction").show();
     //hide edit button
     $(this).hide();
});

$(".editAction").click(function (e) {    
 $("tr").find(".deleteAction").hide();
 $("tr").find(".saveAction").hide();
 $("tr").find(".editAction").show();
  //show delete and save
  $(this).closest("tr").find(".deleteAction").show();
  $(this).closest("tr").find(".saveAction").show();
  //hide edit button
  $(this).hide();
});

.deleteAction, .saveAction{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Edit</th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>
    <button class='editAction'>Edit</button>
    </td>
    <td>
    <button class='deleteAction'>Delete</button>
    </td>
    <td>
    <button class='saveAction'>Save</button>
    </td>
  </tr>

  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
       <td>
    <button class='editAction'>Edit</button>
    </td>
    <td>
    <button class='deleteAction'>Delete</button>
    </td>
    <td>
    <button class='saveAction'>Save</button>
    </td>
  </tr>
 
</table>

</body>
</html>

Answer 2

您可以在按钮上添加类，并在第一个按钮上添加事件处理程序。 1.在所有行中首先隐藏（第2和第3）全部按钮。 2.显示所有行的所有第一个按钮。 3.显示当前行（第二和第三）。 4.隐藏当前行的（1st）。模板HTML：

$(document).ready(function(){
  $(".js-btn2").hide();
  $(".js-btn3").hide();
})

$(".js-btn1").on("click", function(){
	$(".js-table").find(".js-btn2,.js-btn3").hide();
  $(".js-table").find(".js-btn1").show();
	$(this).closest("tr").find(".js-btn2,.js-btn3").show()
  $(this).hide();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <table class="js-table"> 
  <tbody>
    <tr>
      <td>Row1</td>
      <td>
        <button class="js-btn1"> Btn1 </button>
        <button class="js-btn2"> Btn2 </button>
         <button class="js-btn3"> Btn3 </button>
      </td>
    </tr>
    <tr>
      <td>Row2</td>
       <td>
        <button class="js-btn1"> Btn1 </button>
        <button class="js-btn2"> Btn2 </button>
         <button class="js-btn3"> Btn3 </button>
      </td>
    </tr>
  </tbody>
  </table>
</body>
</html>

Answer 3

尝试（运行）以下代码段。它简单易懂。根据需要进行修改。

请确保在多行上使用类而不是 #editAction 上的id。

$(document).ready(function() {
  $("#myTable").on('click', 'tbody tr .editAction', function(e) {
    $('.quantity').removeClass('show');
    $('.editAction').removeClass('hide');

    $(this).addClass('hide');
    $(this).siblings('.quantity').addClass('show');
  });
});

.editAction.hide {
  display: none;
}

.quantity {
  display: none;
}

.quantity.show {
  display: inline;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta content="width=device-width" name="viewport">
  <title>JS Bin</title>
</head>

<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <table id="myTable" width="570">
    <tbody>
      <tr>
        <td>S.no</td>
        <td>Fruit</td>
        <td>Quantity</td>
        <td>Action</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Apple</td>
        <td>5</td>
        <td><button class="editAction">Change Quantity</button> <button class="quantity">+1</button> <button class="quantity">-1</button></td>
      </tr>
      <tr>
        <td>2</td>
        <td>Orange</td>
        <td>8</td>
        <td><button class="editAction">Change Quantity</button> <button class="quantity">+1</button> <button class="quantity">-1</button></td>
      </tr>
    </tbody>
  </table>
  </body>
    </html>

如何在表中设置为默认值？

3 个答案: