主页 / 问题 / 672055
Accepted
bsuart
Asked:2020-05-29 02:50:05 +0000 UTC2020-05-29 02:50:05 +0000 UTC

单击按钮时隐藏/显示元素

  • 772

这里有张桌子：

<table class="table_dark">
    <caption>FLIGHTS</caption>
    <tr>
        <th>Id</th>
        <th>Navigation</th>
        <th>Registration to flight</th>
    </tr>
    <c:forEach var="flight" items="${flights}">
        <tr id="tr${flight.id}">
            <td>${flight.id}</td>
            <td>${flight.navigation}</td>
            <td><input type="submit" onclick="registrationClickHandler(event);" value="Register" id="register${flight.id}" class="myButtonStyle1"></td>
        </tr>
    </c:forEach>
</table>

表图：

在此处输入图像描述

当您单击“注册”按钮以隐藏所有其他 tr 时，这是必要的。当您单击关闭按钮( id=closeButton ) 时再次显示。

问题：最好的方法是什么？

javascript

1 个回答

  1. Best Answer

    正如评论中所建议的那样，可以使用 jquery 和方法解决该任务，hide并且show：

    $('input').click(function() {
  $('.row-that-can-be-hidden').hide();
  $(this).closest('.row-that-can-be-hidden').show();
});

$('button').click(function() {
  $('.row-that-can-be-hidden').show();
});
    table, th, td {
  border: 1px solid black;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>close</button>
<table class="table_dark">
  <caption>FLIGHTS</caption>
  <tr>
    <th>Id</th>
    <th>Navigation</th>
    <th>Registration to flight</th>
  </tr>
  <tr id="tr1" class="row-that-can-be-hidden">
    <td>1</td>
    <td>Минск Париж</td>
    <td><input type="submit" value="Register" id="register1" class="myButtonStyle1"></td>
  </tr>
  <tr id="tr2" class="row-that-can-be-hidden">
    <td>2</td>
    <td>Минск Краков</td>
    <td><input type="submit" value="Register" id="register2" class="myButtonStyle1"></td>
  </tr>
</table>

    • 3

相关问题