Foros del Web » Programando para Internet » Javascript »

evento onclick en tr

 Estas en el tema de evento onclick en tr en el foro de Javascript en Foros del Web. hola a todos estoy tratando de hacer un grid para mostrar informacion y me he encontrado con el siguiente problema, quiero que al hacer click ...
  #1 (permalink)  
Antiguo 03/10/2011, 09:23
 
Fecha de Ingreso: julio-2010
Mensajes: 41
Antigüedad: 13 años, 9 meses
Puntos: 7
evento onclick en tr
hola a todos
estoy tratando de hacer un grid para mostrar informacion y me he encontrado con el siguiente problema, quiero que al hacer click sobre una fila esta me redireccione hacia una pagina mas detallada del producto seleccionado esto lo logro con el evento onclick en el tr pero quiero que solo funcione en todas las celdas menos la ultima que la reservo para eliminar y es que tengo que darle exactamente sobre el vinculo eliminar para que funcione si doy click un poco afuera me coge el evento onclick del tr, alguien sabe como solucionar esto?. una posible solucion seria poner el evento solo en los td que necesito (que son todos menos el ultimo) pero mi grid tendra muchas columnas y me seria muy engorroso hacer esto

Gracias de antemano
Código HTML:
<table border='1' style="width:50%;margin:0 auto;">
	<tr onclick="document.location='http://localhost/'">
		<td>Info 1</td>
		<td>Info 1</td>
		<td>Info 1</td>
		<td><a href="http://loquesea.com">eliminar</a></td>
	</tr>
	<tr onclick="document.location='http://localhost/'">
		<td>Info 2</td>
		<td>Info 2</td>
		<td>Info 2</td>
		<td><a href="http://loquesea.com">eliminar</a></td>
	</tr>		
</table>
  #2 (permalink)  
Antiguo 03/10/2011, 10:43
Avatar de Artificium  
Fecha de Ingreso: enero-2011
Mensajes: 492
Antigüedad: 13 años, 3 meses
Puntos: 81
Respuesta: evento onclick en tr
Bien, hay una manera, asigna al último td una clase, no importa que no tengas ningún estilo para esa clase, solo es un indicador, digamos que la clase sea "eliminar". Entonces debes asignarle al evento click una función, de este modo:

<tr onclick="verDetalles(event);">

la función verDetalles sería mas o menos así:

Código: 
 function verDetalles(evt) {
  var target = evt.srcElement ? evt.srcElement : evt.target;
  if (target.className != 'eliminar') document.location='http://localhost/';
}
Espero que te sirva.
  #3 (permalink)  
Antiguo 03/10/2011, 10:52
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: evento onclick en tr
orlandopc09:

no lo implemente pero con Jquery podrias hacerlo, harías un click.function() para todos los elemento con un determinado identificador, que puede ser una class

<tr><td class="link">aaa</td><td class="link">aaa</td><td>aaa</td></tr>

$(".link").click(function(event) {
window.location.href= "url";
});

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #4 (permalink)  
Antiguo 03/10/2011, 13:20
 
Fecha de Ingreso: julio-2010
Mensajes: 41
Antigüedad: 13 años, 9 meses
Puntos: 7
Respuesta: evento onclick en tr
hola artificium y gracias me funciono perfecto

Emprear gracias a ti tambien pero no me defiendo muy bien con JQuery aunque quiero tener en cuenta todo esto para un futuro

aquí dejo como me quedo para alguien que tenga el mismo problema mio.
Código HTML: 
Ver original
  1. <html>
  2.     <head>
  3.         <script type="text/javascript">
  4.             function verDetalles(evt) {
  5.               var target = evt.srcElement ? evt.srcElement : evt.target;
  6.               if (target.className != 'eliminar') document.location='http://localhost/';
  7.             }
  8.         </script>
  9.     </head>
  10.     <body>
  11.         <table border='1' style="width:50%;margin:0 auto;">
  12.             <tr onclick="verDetalles(event)">
  13.                 <td>Info 1</td>
  14.                 <td>Info 1</td>
  15.                 <td>Info 1</td>
  16.                 <td class="eliminar"><a href="http://loquesea.com">eliminar</a></td>
  17.             </tr>
  18.             <tr onclick="verDetalles(event)">
  19.                 <td>Info 2</td>
  20.                 <td>Info 2</td>
  21.                 <td>Info 2</td>
  22.                 <td class="eliminar"><a href="http://loquesea.com">eliminar</a></td>
  23.             </tr>       
  24.         </table>
  25.     </body>
  26. </html>
  #5 (permalink)  
Antiguo 03/10/2011, 13:40
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: evento onclick en tr
se puede hacer mas dinámico. en el caso que usas si no se pulsa en el link, rediccionará a localhost
Cita:
function escucha() {
var trs = document.getElementById('tabla').getElementsByTagN ame('tr');
for (var i = 0; i < trs.length; i++) {
for (var j = 0, tds= trs[i].getElementsByTagName('td'); j< tds.length; j++) {
tds[j].addEventListener( 'click',function(){redireccion(this.innerHTML);},f alse);
}
}
}


function redireccion(valor) {
if (valor != 'eliminar') {
window.location.href='http://localhost/';
} else {
window.location.href='http://loquesea.com';
}
}

window.onload = function() {escucha()};


<table id="tabla" border='1' style="width:50%;margin:0 auto;">
<tr>
<td>Info 1</td>
<td>Info 1</td>
<td>Info 1</td>
<td>eliminar</td>
</tr>
<tr>
<td>Info 2</td>
<td>Info 2</td>
<td>Info 2</td>
<td>eliminar</td>
</tr>
</table>
  #6 (permalink)  
Antiguo 05/10/2011, 14:04
 
Fecha de Ingreso: julio-2010
Mensajes: 41
Antigüedad: 13 años, 9 meses
Puntos: 7
Respuesta: evento onclick en tr
hola nuevamente, se me presento otro inconveniente. el caso es que el td con clase eliminar (<td class="eliminar">) en la practica no solo tiene esa clase si no dos mas <td class="eliminar last center"> pero el script no es capas de distinguir eso al igual que hace el css y ha dejado de funcionar.
habrá alguna forma de solucionar esto?
  #7 (permalink)  
Antiguo 05/10/2011, 14:30
Avatar de Artificium  
Fecha de Ingreso: enero-2011
Mensajes: 492
Antigüedad: 13 años, 3 meses
Puntos: 81
Respuesta: evento onclick en tr
Solo has este cambio y aprende más JavaScript:

Código: 
if (target.className.indexOf('eliminar') == -1) ...
  #8 (permalink)  
Antiguo 05/10/2011, 17:30
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: evento onclick en tr
quizás este método te sea más facil, no necesitas javascript (salvo el evento onclick="window.location.href='url'" en el tr)
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>click en fila</title>
  6. <style type="text/css">
  7. /*<![CDATA[*/
  8.       td{
  9.       cursor: pointer;
  10.       }
  11.       td.eliminar a{
  12.       display:block;
  13.       width: 100%;
  14.       height:100%;
  15.       text-decoration: none;
  16.       z-index: 1;
  17.       }
  18.       table.c1 {width:50%;margin:0 auto;}
  19. /*]]>*/
  20. </style>
  21.  
  22. </head>
  23. <body>
  24. <table border='1' class="c1">
  25. <tr onclick="window.location.href='http://goolge.com'">
  26. <td>Info 1</td>
  27. <td>Info 1</td>
  28. <td>Info 1</td>
  29. <td class="eliminar">eliminar</td>
  30. </tr>
  31. <tr onclick="window.location.href='http://goolge.com'">
  32. <td>Info 2</td>
  33. <td>Info 2</td>
  34. <td>Info 2</td>
  35. <td class="eliminar"><a href="http://microsoft.com">eliminar</a></td>
  36. </tr>
  37. </table>
  38. </body>
  39. </html>
De esa manera el evento onclick sobre el tr no afectará a la celda eliminar porque esta en realidad será ocupada en su totalidad porel link que contiene


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #9 (permalink)  
Antiguo 06/10/2011, 05:40
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: evento onclick en tr
lo estraño es que ni tan siquiera te has parado a probar este código en el que no importa la class y es más dinámico
  #10 (permalink)  
Antiguo 07/10/2011, 07:06
 
Fecha de Ingreso: julio-2010
Mensajes: 41
Antigüedad: 13 años, 9 meses
Puntos: 7
Respuesta: evento onclick en tr
hola y gracias a todos por responder me funciono bien todos sus consejos y he resuelto mi problema.
IsaBelM disculpa q no te haya agradecido por tu aporte pero la verdad aunque me funciono no entiendo muy bien tu codigo y como bien dijo Artificium tengo que aprender mas javascript y estoy en ello.
a todos gracias nuevamente
  #11 (permalink)  
Antiguo 07/10/2011, 07:15
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: evento onclick en tr
sencillo

Cita:
function escucha() {
var trs = document.getElementById('tabla').getElementsByTagN ame('tr'); // se obtiene la colección de tr que hay en el documento
for (var i = 0; i < trs.length; i++) { // se recorre la colección de tr
for (var j = 0, tds= trs[i].getElementsByTagName('td'); j< tds.length; j++) { // se recorre y se obtiene la colección de td que tiene cada tr
tds[j].addEventListener('click',function(){redireccion(t his.innerHTML);},false); // se usa el método addEventListener para asignar un evento a cada td. cuando se cliquea en un td, se invoca la función redireccion
}
}
}

window.onload = function() {escucha()}; // cuando la página está cargada, se invoca la función escucha(). aquí también se podría usar el método addEventListener()
  #12 (permalink)  
Antiguo 07/10/2011, 07:54
 
Fecha de Ingreso: julio-2010
Mensajes: 41
Antigüedad: 13 años, 9 meses
Puntos: 7
Respuesta: evento onclick en tr
gracias IsaBelM por darme un poco tu tiempo en comentar el code, ahora lo entiendo un poco mejor, ya me he puesto como meta aprender un poco javascript

Salu2

Etiquetas: evento, onclick, formulario
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 04:22.