Select Text from Control in Table Row with JQuery

Question

Hi Guys

I have a table row with 5 cells.

I want to click an image in the last cell, and get the text value from a radio button in the first cell.

Can somebody tell me jQuery command I need?

I'm currently doing it like :

// when the image is clicked

alert($(this)[0].parentElement.parentElement.children[0].childNodes[1].innerText);

but something tells me this is a bit too verbose to be correct.

any ideas?

Thanks

Dave

Answer 1

Maybe something like:

$(this).closest('tr').find('td:first input[type=radio]').val();

It's a little tough without your markup, but that should be a good start.

Answer 2

Example with markup. (using button instead of img)

<table border="1">
    <tr>
        <td><input type="radio" name="example" value="foo" /> Foo Label</td>
        <td>stuff</td>
        <td><button onclick="checkIt(this)">Check it</button></td>
    </tr>
</table>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"&gt;&lt;/script&gt;

<script type="text/javascript">

    function checkIt(button){  
        // Alert the value of the radio
        alert($(button).parents('tr').find('td:first :radio').val());

        // Alert the label of the radio
        alert($(button).parents('tr').find('td:first').contents().filter(function() {
            return this.nodeType == Node.TEXT_NODE;
        })[0].data)
    };  
</script>

Edit: Added label alert()

Answer 3

Markup would be good to know here, radio button: are there more than one? Just need the selected one if so? You might use the selectors like: checked one:

$(this).parent().sibling('td').children('input:radio:checked').val();

first column checked one:

$(this).parent().sibling('td:first').children('input:radio:checked').val();