Foros del Web » Programando para Internet » Javascript »

Seleccionar fila de una tabla con checkbox o radio button

Estas en el tema de Seleccionar fila de una tabla con checkbox o radio button en el foro de Javascript en Foros del Web. Hola! Tengo un problemilla con un formulario. El formulario lo genero a partir del resultado de una consulta a la BBDD. Hasta aquí muy bien. ...
  #1 (permalink)  
Antiguo 14/01/2008, 17:08
 
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona
Mensajes: 289
Antigüedad: 16 años, 4 meses
Puntos: 8
Seleccionar fila de una tabla con checkbox o radio button

Hola!

Tengo un problemilla con un formulario. El formulario lo genero a partir del resultado de una consulta a la BBDD. Hasta aquí muy bien.
Pero lo que quiero es que mediante un check box o un raio button pueda seleccionar toda la fila (cambiando el color, para lo que ya tengo un script hecho) y a partir de esa fila seleccionada, dar la posibilidad de modificar las columnas de esa fila.

Mi problema está en que no se como hacer lo de obtener que fila ha sido selecionada. Creo que lo correcto sería hacerlo mediante el ID del cliente marcado (ya que es único) pero no se como extrar los datos de la fila marcada.

Todo esto me pasa por el modo en que genero el formulario, ya que si fuera de otra forma si que lo se hacer. Pongo el código de generación para que se entienda mejor.

Código PHP:
$result mysql_query($sql,$con);
if(
mysql_num_rows($result)>0)
{
  echo 
"<span class=\"titulo\">Selecciona el cliente que deseas actualizar</span><br><br><br><br><br>";
  echo 
"<table id=\"tabla\" border align=\"center\" bordercolor=\"#bbcaeb\">";
  print 
"<th align=\"center\" bgcolor=\"#bbcaeb\">&nbsp;</th>\n";

  for (
$i 0$i mysql_num_fields($result); $i++){ 
    print 
"<th align=\"center\" bgcolor=\"#bbcaeb\"><span class=\"columna\">".mysql_field_name($result$i)."</span></th>\n";
  }

  
$i=0;  
  while (
$registro mysql_fetch_row($result)) 
  { 
    echo 
"<tr align=\"center\" bgcolor=\"#bbcaeb\">";
    echo 
"<td bgcolor=\"white\"><input type=\"radio\"td>"
    foreach(
$registro  as $clave){ 
        echo 
"<td bgcolor=\"white\" align=\"center\"><span class=\"standar\">",$clave,"</span></td>"
    } 
   }
echo 
"</tr></table>";
exit;
}
else
{
   
$message "<span class=\"error\">No hay coincidencias. Vuelve a realizar la búsqueda.</font></h2>";

Como se ve en el código, los radio buttons los genreo dependiendo de la consulta, por lo que no tienen ni name ni value asignados.

He pegado solo la parte del codigo que interesa, el resto creo que no hace falta.
No se si pido mucho, pero agradezco cualquier tipo de sugerencia.
  #2 (permalink)  
Antiguo 15/01/2008, 00:23
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Re: Seleccionar fila de una tabla con checkbox o radio button

Hola:

Mediante el DOM puedes obtener el tag padre de cualquier tag, así que creo que te bastaría con un bucle hasta que obtengas un tag "TR"...

<radio onclick="seleccionaTR(this)" >...

Y la función seleccionaTR...

function seleccionaTR(elemento) {
while (elemento.tagName != "TR") elemento = elemento.parentNode;
elemento.style.backgroundColor = "blue";
}

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 15/01/2008, 03:51
 
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona
Mensajes: 289
Antigüedad: 16 años, 4 meses
Puntos: 8
Re: Seleccionar fila de una tabla con checkbox o radio button

Hola, muchas gracias por contestar!

Lo siento pero no entiendo tu script. Por lo que he entendido, creo que me dices que haga esto:

Código PHP:
echo "<td bgcolor=\"white\"><input type=\"radio\" onclick="seleccionaTR(this)" >"</td>; 
Pero con la funcion que me has pasado no se que es lo que voy a obtener. Por lo poquísimo que se de JS creo que obtendré un conjunto de objetos mientras no se cumpla el while¿?¿? Es que no entiendo la condición, si que entiendo el código, pero no lo que voy a obtener.

Tampoco veo claro lo de:

elemento = elemento.parentNode;

Haciendo eso no machacarás "elemento"?

Siento mi ignorancia...
  #4 (permalink)  
Antiguo 15/01/2008, 09:25
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Re: Seleccionar fila de una tabla con checkbox o radio button

Cita:
Iniciado por crujikoki Ver Mensaje
Hola, muchas gracias por contestar!

Lo siento pero no entiendo tu script. Por lo que he entendido, creo que me dices que haga esto:

Código PHP:
echo "<td bgcolor=\"white\"><input type=\"radio\" onclick="seleccionaTR(this)" >"</td>; 
Pero con la funcion que me has pasado no se que es lo que voy a obtener. Por lo poquísimo que se de JS creo que obtendré un conjunto de objetos mientras no se cumpla el while¿?¿? Es que no entiendo la condición, si que entiendo el código, pero no lo que voy a obtener.

Tampoco veo claro lo de:

elemento = elemento.parentNode;

Haciendo eso no machacarás "elemento"?

Siento mi ignorancia...
Pues en vez de "cuestionar" el funcionamiento tendrías que probarlo... con
elemento = elemento.parentNode;
se asigna el nodo padre a la variable elemento sin machacar nada... y el while hace un bucle hasta que ese elemento sea un tag TR (fila de tabla)... y al encontrarlo lo pone con fondo azul...

Si no sabes que hacen las cosas, no dudes en preguntar, que así como te estamos dando soluciones, te podemos explicar su funcionamiento

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 15/01/2008, 09:56
 
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona
Mensajes: 289
Antigüedad: 16 años, 4 meses
Puntos: 8
Re: Seleccionar fila de una tabla con checkbox o radio button

No he cuestionado nada, te he dicho que no entendia tu código. Pero al ver tu segundo post ahora creo que el que no me ha entendido has sido tu. O yo me he explicado mal que quizás es eso.

Mi problema no es cambia el color de la fila seleccionada. Mi problema es como sacar la información de esa fila.

Gracias por contestar de todos modos.
  #6 (permalink)  
Antiguo 15/01/2008, 15:27
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Re: Seleccionar fila de una tabla con checkbox o radio button

Cita:
Iniciado por crujikoki Ver Mensaje
...
Mi problema está en que no se como hacer lo de obtener que fila ha sido selecionada. Creo que lo correcto sería hacerlo mediante el ID del cliente marcado (ya que es único) pero no se como extrar los datos de la fila marcada.
...
Bueno, creo que te he contestado como obtener la fila (el tag TR contenedor)... si quieres los inputs que están en esa fila debes consultar la colección de tags "input" de dentro... elemento.getElementsByTagName("input").

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #7 (permalink)  
Antiguo 16/01/2008, 03:09
 
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona
Mensajes: 289
Antigüedad: 16 años, 4 meses
Puntos: 8
Re: Seleccionar fila de una tabla con checkbox o radio button

Gracias de nuevo!

Pero soy muy muy novato en JS y no se como hacer lo que dices aun. Me pudes poner un ejemplo?
Supongamos que tengo esta tabla:
Código HTML:
<table id='tabla_clientes'> 
<tr><td>Nombre</td><td>apellido</td><td>ID</td></tr> 
<tr><td>Anacleto</td><td>Roncesvalles</td><td>1</td></tr> 
<tr><td>Froilán</td><td>Del Cajón</td><td>2</td></tr> 
</table> 
Yo lo que quiero es que si mediante un radio o un checkbox como hemos estado hablando hasta ahora se me seleccione esa fila (esto yalo tenemos claro). Una vez seleccionada la fila que me diga cual es el ID del cliente para poder buscarlo yo en mi BBDD y hacer lo que pertoque.

Si me pones el ejemplillo hazlo pensando que de JavaScript se lo justo por no decir menos...
Muchas gracias de antemano.
  #8 (permalink)  
Antiguo 16/01/2008, 14:07
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Re: Seleccionar fila de una tabla con checkbox o radio button

Hola:

No veo en tu ejemplo ningún radio... y sobre los datos, no sé si son parte de un formulario o simplemente el contenido de otras celdas...

El ejemplo que pones parece que no lo has sacado de tu página (o no he comprendido tu pregunta)

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #9 (permalink)  
Antiguo 16/01/2008, 17:32
 
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona
Mensajes: 289
Antigüedad: 16 años, 4 meses
Puntos: 8
Re: Seleccionar fila de una tabla con checkbox o radio button

Podrías mirar el primer post que creo que ahí se ve mucho más claro. Pero por tus respuestas en los posts posteriores entiendí que no comprendiste mi duda así que puse ese ejemplo tan tonto para ver si así me hacía entender (o consigo que me entiendas).
Efectivamente ese ejemplo no tiene ni formulario ni ningun radio (ahora veo de lo que dan de si los 11.000 posts...), pero si has entendido la idea de mi último post pues aplícalo al primero que es el código de verdad.

Gracias nuevamente.
  #10 (permalink)  
Antiguo 17/01/2008, 09:52
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 2 meses
Puntos: 772
Re: Seleccionar fila de una tabla con checkbox o radio button

Hola crujikoki

Si el lugar de poner código PHP, pusieras el código HTML y JavaScript que se genera, sería más fácil ayudarte. Es sólo un consejo, naturalmente no estás obligado a seguirlo.

Saludos,

P.D. aquí puedes ver de lo que dan de si los 16.000 posts...
  #11 (permalink)  
Antiguo 17/01/2008, 10:25
 
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona
Mensajes: 289
Antigüedad: 16 años, 4 meses
Puntos: 8
Re: Seleccionar fila de una tabla con checkbox o radio button

Hola,

Gracias, pero el JS no es mi fuerte. Uso el PHP por que el JS solo lo uso para cosas puntuales como esta. Si te soy sincero no se como generar una tabla en JS. Pero intentaré hacerlo como dices a ver si es mas sencillo.
Gracias nuevamente.
Saludos.
  #12 (permalink)  
Antiguo 17/01/2008, 12:21
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Re: Seleccionar fila de una tabla con checkbox o radio button

Hola:

Como veo que sigues sin intención de hacer fácil la respuesta, te diré un par de cosillas e iré al grano.
En el primer post, ví código php que no viene al caso. Tienes suerte de que conozco lo suficiente el lenguaje como para entender lo que hay en el mismo.
La primera respuesta contestaba perfectamente la pregunta de obtener la fila del radio que se selecciona
Sobre el número de mensajes, casi todos son intentando dar respuesta a usuarios que preguntan algo que pienso que puedo contestar, y unos cuantos también son "reproches", como hice contigo, y haré siempre que considere que me hacen perder el tiempo, o que no ponen interés en mis respuestas/ayudas... no me importa no ser popular con esos usuarios.

Al grano:
Voy a hacer que cada elemento span, se convierta en un campo de texto, y al último añadirle un botón que cambie otra vez los campos de texto en elementos span...

Código:
<html>
<head>
<script>
function seleccionaTR(elemento)	{
	ele = elemento;
	while (ele.tagName != "TR") {ele = ele.parentNode;}
	if (ele.style.backgroundColor != "red")	{
		ele.style.backgroundColor = "red";


		for (i = 0, celdas = ele.getElementsByTagName("TD"), total = celdas.length; i < total; i ++)
			if (celdas[i].getElementsByTagName("SPAN").length > 0)	{
				yo = celdas[i].getElementsByTagName("SPAN")[0];
				contenido = yo.innerHTML;

				nuevo = document.createElement("input");
				nuevo.setAttribute("type", "text");

				nuevo.value = contenido;
				yo.parentNode.replaceChild(nuevo, yo);

				if (i == celdas.length - 1) {
					cambiar = document.createElement("button");
					cambiar.innerHTML = "cambiar";
					nuevo.parentNode.appendChild(cambiar);
					cambiar.onclick = cambiarTR;
				}

		}
	}	else alert("fila seleccionada")
}

function cambiarTR(e) {
	if (window.event)	elemento = event.srcElement;
	else	elemento = e.target;
	ele = elemento;
	while (ele.tagName != "TR") {ele = ele.parentNode;}
	elemento.parentNode.removeChild(elemento);
	ele.style.backgroundColor = "blue";

		for (i = 0, celdas = ele.getElementsByTagName("TD"), total = celdas.length; i < total; i ++)
			if (celdas[i].getElementsByTagName("INPUT")[0].getAttribute("type") == "text")	{
				yo = celdas[i].getElementsByTagName("INPUT")[0];
				contenido = yo.value;

				nuevo = document.createElement("span");

				nuevo.appendChild(document.createTextNode(contenido));
				yo.parentNode.replaceChild(nuevo, yo);


		}

}
</script>
</head>
<body>
<table border="1" >

<tr>

<td><input type="radio" onclick="seleccionaTR(this)" name="x" /></td>
<td><span>Hola</span></td>
<td><span>Hola</span></td>
<td><span>Hola</span></td>
<td><span>Hola</span></td>

</tr>


<tr>
<td><input type="radio" onclick="seleccionaTR(this)" name="z" /></td>

<td><span>Hola</span></td>
<td><span>Hola</span></td>
<td><span>Hola</span></td>
<td><span>Hola</span></td>

</tr>

</table>

</body>
</html>
De todos modos, si te sirve el código (no olvides probarlo), te quedará más trabajo para actualizar luego la base de datos...

Saludos

Por cierto, desde el navegador puedes usar la opción "ver código fuente" y fácilmente obtendrás lo que nos interesa en este foro.

__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #13 (permalink)  
Antiguo 18/01/2008, 04:35
 
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona
Mensajes: 289
Antigüedad: 16 años, 4 meses
Puntos: 8
Re: Seleccionar fila de una tabla con checkbox o radio button

Hay muchas cosas que resaltar de todo este hilo...

Cita:
En el primer post, ví código php que no viene al caso. Tienes suerte de que conozco lo suficiente el lenguaje como para entender lo que hay en el mismo.
Gracias todopoderoso por concederme el honor de ser ayudado por caricatos!

Cita:
La primera respuesta contestaba perfectamente la pregunta de obtener la fila del radio que se selecciona.
A ver si te enteras de una vez o aprende a leer comprendiendo lo que lees:
Mi primer post dice:

Cita:
Pero lo que quiero es que mediante un check box o un raio button pueda seleccionar toda la fila (cambiando el color, para lo que ya tengo un script hecho) y a partir de esa fila seleccionada, dar la posibilidad de modificar las columnas de esa fila.
Te has quedado con la parte que dice que ya tengo el script para cambiar el color hecho??? Y con la parte de que lo que quiero es saber como cambiar los valores de la fila seleccionada??? Te has quedado, no?

Pues mira cual fué tu respuesta:

Cita:
Código:
<radio onclick="seleccionaTR(this)" >...

Y la función seleccionaTR...

function seleccionaTR(elemento) {
while (elemento.tagName != "TR") elemento = elemento.parentNode;
elemento.style.backgroundColor = "blue";
}
Cuando te digo que con ese script no entiendo como solucionar mi problema vas y me dices que no te cuestione.

En tu siguiente post me das una respuesta que parece más relacionada con lo que persigo. Pero en este caso no entiendo la sintaxis por que, como te digo en mi respuesta, no domino de JS y por eso pregunto a los que "saben". Añado una tabla miserable de ejemplo para que apliques tu última sugerencia en ella y me contestas otra de tus genialidades:

Cita:
No veo en tu ejemplo ningún radio... y sobre los datos, no sé si son parte de un formulario o simplemente el contenido de otras celdas...

El ejemplo que pones parece que no lo has sacado de tu página (o no he comprendido tu pregunta)
Tremendo tio. Que más da si lo he sacado o no de mi página (efectivamente no es de mi página, aun que los nombres se me ocurrieron a mi solito )

Y ahora viene la apoteosis:

Cita:
Por cierto, desde el navegador puedes usar la opción "ver código fuente" y fácilmente obtendrás lo que nos interesa en este foro.
Me estás vacilando???? Si lo del código fuente lo pones por que no querias ver el PHP verias solo el html y si lo hay algún script. Si puse el PHP era para que viérais como genero la tabla para que quien se moleste en mirarse el post entienda donde está mi dificultad (una de ellas que el número de filas no siempre és el mismo y por supuesto su contenido). Para ti y tus 11.000 posts quizás no es una dificultad pero para mi si y por eso posteé aquí ya que me parece un foro cojonudo.

De todas formas quiero darte las gracias por la molestia y sobre todo por tu último post que creo que está extremadamente currado, por que lo he probado y es exactamente lo que estoy buscando. Sencillamente lo describiría como PERFECTO. Cuando lo he visto casi me pongo a llorar. Gracias por que me has hecho un favor tremendo.

Saludos!

PD: El hilo estaría mucho mejor si no lo hubieras desvirtuado con tus fomas.

Última edición por crujikoki; 18/01/2008 a las 04:47 Razón: Corregir las faltas que he detectado, las que no siguen ahí...
  #14 (permalink)  
Antiguo 18/01/2008, 10:12
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Re: Seleccionar fila de una tabla con checkbox o radio button

Hola:

¡Je, je!... parece que nos vamos conociendo... lástima por lo de "MIS" formas... todo lo tuyo ha sido idílico...

No es mi primer mensaje donde salen chispas, pero prefiero los temas más amigables. De todos modos creo que necesitarás más ayuda... si coincidimos, te aseguro que seguiré siendo el mismo.

Bueno, sinceramente me alegro de que te parezca bien la respuesta (no te creas que javascript es fácil... en ocasiones dar una respuesta implica echarse alguna horilla)

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #15 (permalink)  
Antiguo 20/01/2008, 05:15
 
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona
Mensajes: 289
Antigüedad: 16 años, 4 meses
Puntos: 8
Re: Seleccionar fila de una tabla con checkbox o radio button

Pues en esta la has clavado de mala manera!

Gracias y hasta otra!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:53.