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

Imágen de perfil

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


JavaScript

Publicado el 07 de Febrero del 2018 por xve
2.466 visualizaciones desde el 07 de Febrero del 2018. Una media de 70 por semana
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 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 07 de Febrero del 2018gráfica de visualizaciones de la versión: Versión 1.0
2.467 visualizaciones desde el 07 de Febrero del 2018. Una media de 70 por semana
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
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s4426  
Revisar política de publicidad