-2

I am trying to use a jQuery to hide something and show a form in a table, but right now I hide or show everything on my custom tag. How could I make this script only target an ID that I could give to those tag?

$(document).ready(function() {
  $(".hide").click(function() {
    $("p").hide(100);
    $("z").show(100);
  });
  $(".show").click(function() {
    $("p").show(100);
    $("z").hide(100);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-bordered">
  <th>début vacance</th>
  <th>fin vacance</th>
  <th>supprimer vacances</th>
  <tr th:each="vacations : ${selectedUser.getVacations()}">
    <td th:utext="${vacations.getStartVacation()} ">...</td>
    <td th:utext="${vacations.getEndVacation()} + ${vacations.id}">...</td>
    <td>
      <p th:text="${vacation.fistname}">...</p>
      <z th:text="${vacations.id}">...</z>
      <button class="hide">Hide</button>
      <button class="show">Show</button>
    </td>
</table>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
shas
  • 378
  • 4
  • 20
  • What's the actual HTML output? I doubt `` is an element that's used within the `table` – Rory McCrossan Aug 24 '18 at 08:47
  • is a custom tag that my jqerry script target, and my probleme is that i don't know how to target specific tag in my table – shas Aug 24 '18 at 08:53
  • @31piy -- i want to be able that my hide or show button only affect the and

    button in that row, not all the table, i was maybe thinking i could give them an id, but i don't know how to put that in the script

     – shas Aug 24 '18 at 08:57
  • 4
    @31piy no, you cannot invent your own elements, unless you also create your own DOCTYPE which will interpret them dynamically. With HTML5 it's certainly not allowed: https://i.imgur.com/aeAWcYA.png – Rory McCrossan Aug 24 '18 at 09:05

2 Answers2

0

Try like this. This will check the nearest parent tr and find p or z inside this. This will not fail any case if u added multiple container for p also

  <script>
      $(document).ready(function(){
          $(".hide").click(function(){
              $(this).parents('tr').find("p").hide(100);
              $(this).parents('tr').find("z").show(100);
          });
          $(".show").click(function(){
              $(this).parents('tr').find("p").show(100);
              $(this).parents('tr').find("z").hide(100);
          });
      });
  </script>

Hope this helps

Jomy Joseph
  • 321
  • 1
  • 8
0

Since the buttons and p and z tags are siblings, you can do something like this to scope the operations to current td only:

$(".hide").click(function() {
  $(this).siblings("p").hide(100);
  $(this).siblings("z").show(100);
});

$(".show").click(function() {
  $(this).siblings("p").show(100);
  $(this).siblings("z").hide(100);
});
31piy
  • 23,323
  • 6
  • 47
  • 67