How to find the parent element using javascript

Question

I want to change the background color of the table cell when radio button inside the cell is clicked.

<table>
 <tr>
  <c:forEach items="#{books}" var="book">    
   <td align="center">                                                
    <h:selectOneRadio value="#{book.price}" onclick="this.parentElement.style.background-color='red';">
     <f:selectItems value="#{books.getDetails()}" />
    </h:selectOneRadio>
    </td>
  </c:forEach>
 </tr>
</table>

How to get the parent element reference?

Answer 1

Using plain javascript:

element.parentNode

In jQuery:

element.parent()

Answer 2

Use the change event of the select:

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

Answer 3

The JSF h:selectOneRadio component itself already renders a table. You need to get the parent td of the parent td. E.g.

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

with

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

Tip: when using a server side view technology / MVC framework, better look at its generated HTML output when writing JS/jQuery code. Rightclick page in browser and view source and it will be much clearer what JS/jQuery actually sees and traverses.