JQuery - grab the td value next to radio button

Question

I have the following dilemma: My HTML is as such (this exists within a PL/SQL app.):

<table id="search_result_table">
<tr>

<input type=radio name="pv_select" value="'||lv_spriden_id||'"/>
<font face="Calibri" size=3><td id="spriden_id"     name="spriden_id">'||lv_spriden_id||'</td></font>'
<font face="Calibri" size=3><td id="last_name" class="c_last_name"     name="last_name">'||lv_spriden_last_name||'</td></font>
<font face="Calibri" size=3><td id="first_name" class = "c_first_name"     name="first_name">'||lv_spriden_first_name||'</td></font>
</tr>
</table>

I am able to get at the selected radio button value via:

$("input[name=pv_select]:checked").val()

However, I would like to be able to get the value of the "last_name" column cell (which exists within a table next to the radio button). How can I retrieve this value (for the selected row via the radio button) via jQuery?

I've tried several things, but none are working:

$("input[name=pv_select]:checked").parent().siblings("td:eq(1)").text());    

Thanks in advance.

Answer 1

The HTML is invalid; not sure if that’s mucking up your DOM tree, and thus confusing jQuery as it tries to traverse the broken DOM tree.

Here’s valid HTML:

<table id="search_result_table">
    <tr>
        <td>
            <input type=radio name="pv_select" value="'||lv_spriden_id||'"/>
        </td>
        <td id="spriden_id" name="spriden_id"><font face="Calibri" size=3>'||lv_spriden_id||'</font></td>
        <td id="last_name" class="c_last_name" name="last_name"><font face="Calibri" size=3>'||lv_spriden_last_name||'</font></td>
        <td id="first_name" class = "c_first_name" name="first_name"><font face="Calibri" size=3>'||lv_spriden_first_name||'</font></td>
    </tr>
</table>

And jQuery to get the value of the “last name” table cell in the same row as the checked radio button:

$("input[name=pv_select]:checked").parent().siblings("td.c_last_name").text());

(I say the HTML is valid: values for the id attribute are meant to be unique within an HTML page, so if you have multiple rows using the same id attributes for the table cells, that’s invalid too.)

Answer 2

I just realized that this works in Firefox, yet not in IE. Hence, I shall be analyzing what may be causing for this to fail in one browser and not the other.

Answer 3

You selector works on a generic table with an input in td and last name text in another td

maybe your problem is that last name is declared after the submit, so you should try to modify the selector with

$("input[name=pv_select]:checked").parent().siblings("td:eq(0)").text();

where I just changed index of sibling (if I got your table dump correct, your .siblings("td:eq(1)") is First Name, eq(0) should be last name)

Just a suggestion..

EDIT

When you posted your html excerpt, I realized, that you don't need to check sibling elements of radio's parent. As its parent is tr and siblings of tr in table are just another table rows.

What you may consider is using traversing function .next() which moves to next element in the DOM

It's sad, that I cannot test this enough in FF (or just because Firebug / jquery ext.), but this is the code, you exactly asked for (get next element of radio input):

$('input[name="pv_select"]:checked').next();

the only problem is, that next element is font element, which I cannot seem to render properly in FF (and doesn't reside in the table row - it displays directly inside body in FireBug inspector), so .children() cannot find or whatewer td you are trying to find