Seleccionar el ID de una tabla utilizando eventos del mouse

silverwolf · #1 (**permalink**) 18/03/2011, 15:14

Tengo una tabla generada automáticamente con php, en la cual se ingresan unos datos existentes en unos botones.

Código HTML:

Ver original<input type="button" value="&uarr;" onclick='opcion = this.value' >
<input type="button" value="&darr;" onclick='opcion = this.value' >
<input type="button" value="&Delta;" onclick='opcion = this.value' >
<input type="button" value="&nabla;"  onclick='opcion = this.value' >

Código PHP:

Ver original<?php 
   $niveles = 0;
   $col = 0;
   $row = 0;    
    $id = 0;   
   
   for($i = 5; $i <= 60; $i = $i + 5) 
        echo ('<td id="col'.($col = $col + 1).'" >'.$i.'</td>');    
    }   
    
    echo '</tr>';
    
    for($x = 0; $x <= 10; $x++) {   
        echo ('<tr><td id="row'.($row = $row+1).'">'.($niveles = $niveles+20).'</td>'); 
        for($i = 0; $i <= 11; $i++) {   
            echo ('<td id="c'.($id = $id+1).'"> <input type="text" onclick="value = this.value + opcion" > </td>');     
        }
        echo ('</tr>');     
    }
 
?>

Necesito encontrar una forma de extraer el ID de una celda de contenido seleccionada por medio de una función que tenga asociado algún evento onclick / onmouseup para después poderlo guardar en la base de datos. Estuve utilizando una funciones de tipo

alert(focus(id))

alert(document.getElementById(focus()))

PD: Yo quería hacer la inserción en los TD utilizando innerhtml, pero la verdad no logré encontrar una forma adecuada

también me podrían ayudar con eso??

InKarC · #2 (**permalink**) 18/03/2011, 19:55

Para fritar un huevo necesitas una cacerola, pues bueno, para hacer algo interesante en javascript sin volarte los sesos en el proceso necesitas un framework.

En jQuery eso seria simplemente:

Código:

$(document).ready(function(){
$("td").click(function(){
alert(this.id)	;
})
})

Aqui una prueba funcionando con este código (solo es copiar, pegar y funca)

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" >

$(document).ready(function(){
$("td").click(function(){
alert(this.id)	;
})
})
</script> 
</head>

<body>

<table width="640" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td id="celda_gantz">Gantz</td>
    <td id="celda_evangelio">Evangelion</td>
    <td id="celda_dbz">Dragon Ball Z</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td id="celda_samuraix">Samurai X</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

</body>
</html>

silverwolf · #3 (**permalink**) 22/03/2011, 07:31

Muchas gracias InKarC!!!!!

El código funciona de maravilla, justo lo que necesitaba, la verdad si me estaba fritando los sesos tratando de hacer esa función.

Muchas gracias

silverwolf · #4 (**permalink**) 22/03/2011, 13:05

Otra pregunta, cómo puedo hacer para asociarle esta función a un botón, ya que por lo que probé, se inicia automáticamente con la carga de la página, sin embargo no conozco mucho de javascript como para definir esta función en un botón.

Quisiera que en evento onclick de un input html se llamara la función y que después se seleccione un elemento para la verfificación de id. Espero me puedan ayudar......

InKarC · #5 (**permalink**) 22/03/2011, 13:17

Yo no trabajo gratis dame karma oye! lol

No entiendo exactamente que es lo que pides... si quieres realizar una funcion cada vez que alguien hace cick en un input

Cita:

$("input").click(function(){

testID(this);

})

o si quieres que se ejecute cuando el objeto pierde foco (deja de escribir para hacer otra cosa)

Cita:

$("input").blur(function(){

testID(this);

})

y si quieres cojer el id desde la funcion seria simplkemente

Cita:

function testID(obj){

alert(obj.id)

}

Suerte

silverwolf · #6 (**permalink**) 22/03/2011, 13:34

jejejeje que pena soy nuevo en el foro y no sabía lo del karma XD (ya te dí karma :P)

mira, voy a explicarlo de otra forma, espero no enredarme y hacerme entender

hay un botón

Código HTML:

Ver original<input type="button" value="Verificar ID" onclick="verificarID()" >

luego se debe seleccionar e objeto al cual deseo verificarle el id (es como dos eventos onclick, uno que inicializa la función y otro para seleccionar el elemento del id en cuestión)

tal vez me equivoque, pero el asunto del botón es algo similar a crear un listener para otro onclick

espero que me puedas ayudar, disculpas por las molestias nuevamente y gracias