Comment trouver l'élément parent en utilisant javascript

Question

Je veux changer la couleur de fond de la cellule du tableau lorsque le bouton radio à l'intérieur de la cellule est cliqué.

<table>
  <tr>
    <td align="center">  
      <input type="radio" value="foo" 
        onclick="this.parentElement.style.background-color='red';" />
     </td>
  </tr>
</table>

Comment obtenir la référence de l'élément parent ?

Answer 1

En utilisant le simple javascript :

element.parentNode

Dans jQuery :

element.parent()

Answer 2

Utilisez l'événement de changement de la sélection :

$('#my_select').change(function()
{
   $(this).parents('td').css('background', '#000000');
});

Answer 3

Le JSF h:selectOneRadio Le composant lui-même rend déjà un tableau. Vous devez obtenir le parent td du parent td . Par exemple

<h:selectOneRadio value="#{book.price}" onclick="highlight(this)">

avec

function highlight(radio) {
    radio.parents('td').parents('td').css('background', '#000000');
}

Conseil : lorsque vous utilisez une technologie de vue côté serveur / un cadre MVC, il est préférable de regarder la sortie HTML générée lors de l'écriture du code JS/jQuery. Cliquez avec le bouton droit de la souris sur la page dans le navigateur et affichez la source ; vous verrez plus clairement ce que JS/jQuery voit et traverse.