5

Como puedo recorrer las filas de una tabla HTML y obtener los valores con un botón?

Tengo el ejemplo de una tabla que me obtiene el valor especifico de una celda al hacer clic en la fila, pero lo que requiero es que al hacer clic en un botón ok me obtenga los valores fila x fila:

<!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>

2 respuestas 2

9

Lo primero, si vas a hacer referencia a más de un elemento no debes usar ID, si no que debes usar clases en su defecto.

También, ten en cuenta que los botones de las filas y el botón de "ok" tienen la misma clase, por lo tanto, al hacer click en el botón "ok" se introducía en ambas funciones de JQuery (la que hacía directamente referencia a el mediante su ID y la que hacía referencia a él mediante la clase boton). Yo he cambiado la clase del botón "ok" a boton2 pero tu le puedes llamar como quieras.

Antes había entendido mal tu pregunta. Espero que ahora te sea de utilidad el ejemplo:

<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>

3
  • y si por ejemplo quiero mostrar tambien las otras dos celdas que tendria que hacer, agregar clases a esas celdas o agregar una clase al td?
    – Ivxn
    Commented el 4 nov. 2016 a las 19:25
  • 1
    @Ivxn Estoy intentando editar el jsfiddle para hacerlo todo completo pero no me funciona. Déjame unos minutos y te hago el código con todos los campos de cada fila. Commented el 4 nov. 2016 a las 19:27
  • 1
    @Ivxn Ya he editado mi respuesta. Espero que ahora sea lo que necesitas. Commented el 4 nov. 2016 a las 19:49
3
<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>
1
  • 4
    Debes poner alguna explicación extra, no solo el código.
    – user13558
    Commented el 7 jun. 2017 a las 18:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.