Código de JavaScript - Obtener todos los valores de una fila pulsando un botón en dicha fila 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 fila pulsando un botón en dicha fila con JavaScript

JavaScript

Actualizado el 11 de Diciembre del 2020 por Xve (294 códigos) (Publicado el 7 de Febrero del 2018)

29.487 visualizaciones desde el 7 de Febrero del 2018

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

coger-valores-fila

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

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

Versión 1.0

Publicado el 7 de Febrero del 2018

29.488 visualizaciones desde el 7 de Febrero del 2018

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script>

    window.onload=function() {

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

		let elementos=document.getElementsByClassName("boton");

		for(let i=0;i<elementos.length;i++)

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

			// ejecutamos la función obtenerValores()

			elementos[i].addEventListener("click",obtenerValores);

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

	function obtenerValores(e) {

		var valores="";

		// vamos al elemento padre (<tr>) y buscamos todos los elementos <td>

		// que contenga el elemento padre

		var elementosTD=e.srcElement.parentElement.getElementsByTagName("td");

		// recorremos cada uno de los elementos del array de elementos <td>

		for(let i=0;i<elementosTD.length;i++)

			// obtenemos cada uno de los valores y los ponemos en la variable "valores"

			valores+=elementosTD[i].innerHTML+"\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>

            <td class="boton">coger valores de la fila</td>

        </tr>

        <tr>

            <td>val 4</td>

            <td>val 5</td>

            <td>val 6</td>

            <td class="boton">coger valores de la fila</td>

        </tr>

        <tr>

            <td>val 7</td>

            <td>val 8</td>

            <td>val 9</td>

            <td class="boton">coger valores de la fila</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/s4426

Crear un tablero de ajedrez con JavaScript y CSS

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

Código de JavaScript - Obtener todos los valores de una fila pulsando un botón en dicha fila 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.