Código de JQuery - Obtener todos los valores de una columna pulsando un botón en dicha columna con JQuery

Pos: 1

Val: 302

Ha mantenido su posición en JQuery (en relación al último mes)

Obtener todos los valores de una columna pulsando un botón en dicha columna con JQuery

JQuery

(3)

Publicado el 11 de Diciembre del 2020 por Xve (294 códigos)

4.649 visualizaciones desde el 11 de Diciembre del 2020

En este ejemplo, se muestra como obtener el contenido de todos los <td> de una columna cualquiera de una tabla pulsando un botón ubicado en dicha columna.

coger-valor-columna

Aquí el mismo ejemplo obteniendo el contenido de la fila: https://www.lawebdelprogramador.com/codigo/JQuery/3134-Obtener-todos-los-valores-de-una-fila-pulsando-un-boton-en-dicha-fila-con-JQuery.html

Aquí el mismo código con JavaScript: https://www.lawebdelprogramador.com/codigo/JavaScript/6765-Obtener-todos-los-valores-de-una-columna-pulsando-un-boton-en-dicha-columna-con-JavaScript.html

Versión 1.0
(3)

Publicado el 11 de Diciembre del 2020

gráfica de visualizaciones de la versión: Versión 1.0

4.650 visualizaciones desde el 11 de Diciembre del 2020

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>

    $(document).ready(function(){

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

            let valores="";

            const columna=$(this).index();

            // Obtenemos todos los valores contenidos de la columna seleccionada

            $(this).parents("table").find("tr").each(function() {

                valores+=$(this).find("td")[columna].textContent+"\n";

});

            alert(valores);

});

});

    </script>

    <style>

        .boton {border:1px solid #808080;cursor:pointer;padding:2px 5px;color:Blue;}

    </style>

</head>

<body>

    <table border="1" cellspacing="0" cellpadding="5">

        <tr>

            <td>val 1</td>

            <td>val 2</td>

            <td>val 3</td>

        </tr>

        <tr>

            <td>val 4</td>

            <td>val 5</td>

            <td>val 6</td>

        </tr>

        <tr>

            <td>val 7</td>

            <td>val 8</td>

            <td>val 9</td>

        </tr>

        <tr>

            <td class="boton">coger valores de esta columna</td>

            <td class="boton">coger valores de esta columna</td>

            <td class="boton">coger valores de esta columna</td>

        </tr>

    </table>

</body>

</html>

Comentarios sobre la versión: Versión 1.0 (3)

Ysmak

11 de Diciembre del 2020

hola como podría modificar este ejemplo, ya que en el ultimo td de mi tabla tengo 3 botones y supongo que por eso me da error...gracias

Responder

nicolas

25 de Agosto del 2021

solo veo imagen, el código no está

Responder

Charlie Torres

8 de Diciembre del 2023

Fino tu código y puedes aserlo con filas y columnas filas con id y columnas con name

Responder

Comentar la versión: Versión 1.0

http://lwp-l.com/s6764

Calculo para el sistemas de numerología en JavaScript

Obtener todos los valores de una fila pulsando un botón en dicha fila con JQuery

Código de JQuery - Obtener todos los valores de una columna pulsando un botón en dicha columna con JQuery

Versión 1.0(3)

Comentarios sobre la versión: Versión 1.0 (3)

Comentar la versión: Versión 1.0

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Versión 1.0
(3)