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

Imágen de perfil
Val: 2.985
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Obtener todos los valores de una fila pulsando un botón en dicha fila con JavaScriptgráfica de visualizaciones


JavaScript

Actualizado el 11 de Diciembre del 2020 por Xve (291 códigos) (Publicado el 7 de Febrero del 2018)
22.599 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 2018gráfica de visualizaciones de la versión: Versión 1.0
22.602 visualizaciones desde el 7 de Febrero del 2018
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!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

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

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

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s4426