1

Necesito llamar a cierta función de JavaScript cuando haga click en un icono que está dentro de un td, pero los parámetros que quiero pasarle a esa función son los datos del elemento padre del que hice click.

He intentado con esto:

function hola(este) {
    document.getElementById("demo").innerHTML = este.id;
}
<p>Click the button to trigger a function.</p>
<table>
    <td id="casita">
        <i onclick="parent.hola(this)">@</i>
    </td>
</table>
<p id="demo"></p>

Lo leí en un post de stackoverflow en inglés, pero no me funciona. Lo que estoy intentando es hacer ese innerHTML con la id del td, que sería "casita", pero no logro pasar los datos de ese td mediante el onclick en el icono.

Es muy necesario llamar a la función al hacer click en el icono y no en el td. He intentado con <i onclick="hola(this.parent())">@</i> pero tampoco da resultado.

¿Alguien conoce la manera correcta de hacerlo?

3 respuestas 3

3

Para acceder al Elemento padre (Nodo Padre) de un elemento especifico del DOM , debería emplear la propiedad parentNode

<i onclick="hola(this.parentNode)">@</i>

Se Podría usar la propiedad parentElement pero recomiendo ParendNode ParentNode vs ParendElement -SO además un test aunque las diferencias son mínimas las hay Test

6
  • también ha funcionado, cuál sería la diferencia con lo del post de Mariano? Commented el 1 nov. 2016 a las 5:42
  • @Roberto En los casos en los que el padre no es un elemento, .parentNode lo devuelve, y .parentElement devuelve null. Los casos son raros, por ejemplo en la raíz del documento o dentro de un SVG.
    – Mariano
    Commented el 1 nov. 2016 a las 5:43
  • muchas gracias, cuánto sabes! Commented el 1 nov. 2016 a las 5:45
  • @Dev.Joel En Chrome 54, .parentElement es un 3.7% más rápido (-aunque realmente importa un porcentaje tan chico con esto?)
    – Mariano
    Commented el 1 nov. 2016 a las 5:46
  • 1
    @Dev.Joel Estoy obteniendo el resultado opuesto al tuyo en Windows. De todas formas, lo que estoy diciendo es que no hay diferencias significativas entre uno y el otro. Por eso voté +1 a tu respuesta y sólo consideraría las diferencias si habláramos de children versus .childNodes, donde el último incluye a los nodos de texto.
    – Mariano
    Commented el 1 nov. 2016 a las 6:01
2

La propiedad que estás buscando es .parentElement.

Se puede usar:

  1. Pasándolo en la función.

    <i onclick="hola(this.parentElement)">
    
  2. Referenciándolo dentro de la función:

    var padre = este.parentElement;
    document.getElementById("demo").innerHTML = padre.id;
    

function hola(este) {
    document.getElementById("demo").innerHTML = este.id;
}
<p>Click the button to trigger a function.</p>
<table>
  <td id="casita">
    <i onclick="hola(this.parentElement)">@</i>
  </td>
</table>
<p id="demo"></p>

1
0

Creo que siempre es mejor mantener las cosas simples, para hacer lo que quieres bastaría con:

function hola(id) {
   document.getElementById("demo").innerHTML = id;
}


<p>Click the button to trigger a function.</p>
 <table>
   <td id="casita">
    <i onclick="parent.hola('casita')">@</i>
   </td>
 </table>
<p id="demo"></p>

De esta forma te libras de un acceso innecesario al DOM, para obtener un dato estático.

1
  • lo que dices es cierto, pero lo que yo buscaba en esencia, era pasar todos los datos del elemento padre por esa función, ya que en mi proyecto esa función "hola" que aquí ejemplifiqué a modo práctico, no trabaja solo con la id, sino que con más propiedades de ese elemento padre, como el texto, clase y rowindex. En cualquier caso, tu código no me funciona, puedes hacer un jsfiddle.net para probar tu solución? Commented el 2 nov. 2016 a las 0:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.