Get values from a table row x row - jQuery

Question

Get values from a table row x row - jQuery

Navigation

#1 by (6 votes)
#2 by (1 votes)

4

How can I go through the rows of an HTML table and get the values with a button?

I have the example of a table that gives me the specific value of a cell when I click on the row, but what I need is that when I click on an ok button I get the values row x row:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

  <script>
    $(document).ready(function() {
      $("#ok").click(function() {
        var valores = "";

        $(this).parents("tr").find("#numero").each(function() {
          valores += $(this).html() + "\n";
        });
        console.log(valores);
        alert(valores);
      });


      $(".boton").click(function() {

        var valores = "";

        // Obtenemos todos los valores contenidos en los <td> de la fila
        // seleccionada
        $(this).parents("tr").find("#numero").each(function() {
          valores += $(this).html() + "\n";
        });
        console.log(valores);
        alert(valores);
      });
    });
  </script>
 
  <table border="1" cellspacing="0" cellpadding="5" id="tbl">
    <thead>
      <tr>
        <td>Nombre 1</td>
        <td>Nombre 2</td>
        <td>Apellido 1</td>
        <td>Mantenimiento</td>
      </tr>
    </thead>
    <tr>
      <td id="numero">Kevin</td>
      <td>Joseph</td>
      <td>Ramos</td>
      <td class="boton">coger valores de la fila</td>
    </tr>
    <tr>
      <td id="numero">Viviana</td>
      <td>Belen</td>
      <td>Rojas</td>
      <td class="boton">coger valores de la fila</td>
    </tr>
    <tr>
      <td id="numero">Junior</td>
      <td>Gerardo</td>
      <td>Nosé</td>
      <td class="boton">coger valores de la fila</td>
    </tr>
  </table>
  <br>
  <form action="">
    <label for="">Nombre</label>
    <input type="button" value="ok" id="ok" class="boton">
  </form>
</body>

</html>

javascript jquery html

asked by Ivxn 04.11.2016 в 20:05

source

2 answers

1

<table border="1" cellspacing="0" cellpadding="5" id="tbl">
  <tbody>
      <tr>
        <th>Nombre 1</th>
        <th>Nombre 2</th>
        <th>Apellido 1</th>
        <th>Mantenimiento</th>
      </tr>
    <tr>
      <td>Kevin</td>
      <td>Joseph</td>
      <td>Ramos</td>
      <td><a class="boton" href="">coger valores de la fila</a></td>
    </tr>
    <tr>
      <td>Viviana</td>
      <td>Belen</td>
      <td>Rojas</td>
      <td><a class="boton" href="">coger valores de la fila</a></td>
    </tr>
    <tr>
      <td>Junior</td>
      <td>Gerardo</td>
      <td>Nosé</td>
      <td><a class="boton" href="">coger valores de la fila</a></td>
    </tr>
    </tbody>
  </table>


  <script>

    $(document).ready(function() {


      $(".boton").click(function() {

        //valores obtendra el dato del td por posciones [0]
        var valores = $(this).parents("tr").find("td")[1].innerHTML;
        console.log(valores);
        alert(valores);

        });

    });
  </script>

answered by 07.06.2017 в 20:39

MySQL - How to count the Date and Time fields of each time slot? How to download audio generated with ResponsiveVoice in an MP3 file with Javascript?

score 6 · Accepted Answer

First, if you are going to refer to more than one element you should not use ID , but you should use clases failing it.

Also, keep in mind that the buttons in the rows and the "ok" button have the same class, therefore, clicking on the "ok" button introduced both JQuery functions (the one directly reference to him by his ID and the one that made reference to him by means of the class boton ). I have changed the class of the "ok" button to boton2 but you can call it what you want.

I had misunderstood your question before. I hope the example is now useful:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
      $("#ok").click(function() {
        var valores = "";

				$(".numero").parent("tr").find("td").each(function() {
        		if($(this).html() != "coger valores de la fila"){
            	 valores += $(this).html() + " ";
            }
        });
        
        valores = valores + "\n";
        alert(valores);
      });


      $(".boton").click(function() {

        var valores = "";

        // Obtenemos todos los valores contenidos en los <td> de la fila
        // seleccionada
        $(this).parents("tr").find(".numero").each(function() {
          valores += $(this).html() + "\n";
        });
        console.log(valores);
        alert(valores);
      });
    });
  </script>
 
  <table border="1" cellspacing="0" cellpadding="5" id="tbl">
    <thead>
      <tr>
        <td>Nombre 1</td>
        <td>Nombre 2</td>
        <td>Apellido 1</td>
        <td>Mantenimiento</td>
      </tr>
    </thead>
    <tr>
      <td class="numero">Kevin</td>
      <td>Joseph</td>
      <td>Ramos</td>
      <td class="boton">coger valores de la fila</td>
    </tr>
    <tr>
      <td class="numero">Viviana</td>
      <td>Belen</td>
      <td>Rojas</td>
      <td class="boton">coger valores de la fila</td>
    </tr>
    <tr>
      <td class="numero">Junior</td>
      <td>Gerardo</td>
      <td>Nosé</td>
      <td class="boton">coger valores de la fila</td>
    </tr>
  </table>
  <br>
  <form action="">
    <label for="">Nombre</label>
    <input type="button" value="ok" id="ok" class="boton2">
  </form>