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

Pos: 2

Val: 3.162

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

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

JavaScript

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

4.359 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

5fd3113412d0d-coger-valor-columna

.

Aquí el mismo código pero obteniendo el valor de las filas: https://www.lawebdelprogramador.com/codigo/JavaScript/4426-Obtener-todos-los-valores-de-una-fila-pulsando-un-boton-en-dicha-fila-con-JavaScript.html

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

Versión 1.0

Publicado el 11 de Diciembre del 2020

4.360 visualizaciones desde el 11 de Diciembre del 2020

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script>

    window.onload=function() {

		// creamos los eventos para cada elemento con la clase "boton"

		document.querySelectorAll(".boton").forEach(el => {

			// cada vez que se haga clic sobre cualquier de los elementos,

			// ejecutamos la función obtenerValores()

			el.addEventListener("click", obtenerValores);

});

	// funcion que se ejecuta cada vez que se hace clic

	function obtenerValores(e) {

		let valores="";

        // obtenemos el numero de columna

        const columna=[...e.srcElement.parentElement.getElementsByTagName("td")].indexOf(e.srcElement);

		// vamos a la tabla y buscamos todos los elementos <tr> y dentro el

        // elemento <td>

		var elementosTD=e.srcElement.offsetParent.querySelectorAll("tr").forEach(tr => {

            valores+=tr.querySelectorAll("td")[columna].innerText+"\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 (0)

No hay comentarios

Comentar la versión: Versión 1.0

http://lwp-l.com/s6765

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

Mostrar cinco imágenes aleatorias diferentes cada vez que inicie la página

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

Versión 1.0

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

Comentar la versión: Versión 1.0

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