how to traverse the elements of a row in a table individually with jquery

Question

how to traverse the elements of a row in a table individually with jquery

Navigation

#1 by (0 votes)

1

I designed a table, and the idea is that every time I press the button of a row, I show by means of a message the ID that belongs to that row, but regardless of the button that I press always tells me the Id of the first row. below I leave the code, thanks in advance

<!doctype html>
<html>
<head>
  <title>prueva</title>
  <script  type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
  <body>
    <table>
          <thead>
            <tr>
              <th>nombre</th>
              <th> select </th>
              <th>Id</th>
            </tr> 
          </thead>
          <tbody>
            <tr>
                <td>Rafael</td>
                <td> <input type="button" class="show_Id" value="Show ID">  </td>
                <td><input type="text" value="1" class="Id"></td>
            </tr>
             <tr>
                <td>Acosta</td>
                <td> <input type="button" class="show_Id" value="Show ID">  </td>
                <td><input type="text" value="2" class="Id"></td>
            </tr>
            <tr>
              <td>cedano</td>
              <td> <input type="button" class="show_Id" value="Show ID">  </td>
              <td><input type="text" value="3" class="Id"></td>
           </tr>
          </tbody>
      </table>
  </body>
</html>

<script type="text/javascript">
$(document).ready(function(){

  $('.show_Id').click(function(){

   var id= $('.Id').val();
  alert(id);

  });
    });

</script>

jquery html

asked by Hendrick Rafael 14.12.2018 в 04:31

source

1 answer

Disable Form or button for periods How to get out of a loop with a counter in Java?

score 0 · Accepted Answer

I copy your code and add the change in the click function with a comment on how I did it

<!doctype html>
<html>
<head>
  <title>prueva</title>
  <script  type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
  <body>
    <table>
          <thead>
            <tr>
              <th>nombre</th>
              <th> select </th>
              <th>Id</th>
            </tr> 
          </thead>
          <tbody>
            <tr>
                <td>Rafael</td>
                <td> <input type="button" class="show_Id" value="Show ID">  </td>
                <td><input type="text" value="1" class="Id"></td>
            </tr>
             <tr>
                <td>Acosta</td>
                <td> <input type="button" class="show_Id" value="Show ID">  </td>
                <td><input type="text" value="2" class="Id"></td>
            </tr>
            <tr>
              <td>cedano</td>
              <td> <input type="button" class="show_Id" value="Show ID">  </td>
              <td><input type="text" value="3" class="Id"></td>
           </tr>
          </tbody>
      </table>
  </body>
</html>

<script type="text/javascript">
$(document).ready(function(){
  // vamos a subir dos niveles ->td ->tr y buscamos el elemento 
  // con la clase .Id que has definido y mostramos su valor
  $('.show_Id').click(function(){
    alert($(this).parent().parent().find('.Id').val());
  });
});

</script>