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

Filtrado por el tag: java palabra

<<>>

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)

5.052 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

5.053 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


Nombre

Correo (no se visualiza en la web)

Valoración

Comentarios...

CerrarCerrar

Es necesario revisar y aceptar las políticas de privacidad

Acepto las políticas de privacidad

http://lwp-l.com/s6764

Buscador simple de palabras en cadenas

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)