JQuery Selectors (finding cell in a table that's in a td)

Question

I have an HTML table

 <table id="sometable">
 <tr>
   <td>
       <table class="wTable">
            <tr>
                 <td>
                       <input type="radio" name="rdGroup" val="0" /> 
                 </td>
                 <td>
                       <input type="radio" name="rdGroup" val="5" />
                 </td>
                 <td>
                       <input type="radio" name="rdGroup" val="10" />
                 </td>
            </tr>
       </table>
   </td>
 </tr>
 </table>

The reason for the table within a TD is for the purpose of skinning and positioning. I'm not great when it comes to JQuery and was wondering if there was a selector technique to get access to that radio button when that cell is clicked.

For example, previously my code was set as (before skinning):

 <table>
 <tr>header stuff</tr>
 <tr>
     <td>data</td>
     <td>data 2</td>
     <td><input type="radio" name="rdGroup" value="0"> No Warranty </br>
         <input type="radio" name="rdGroup" value="5"> 1 year Warranty </br>
         <input type="radio" name="rdGroup" value="10"> 2 year Warranty </br>
     </td>
     <td>data 3</td>
 </tr>
 <tr>footer stuff</tr>
 </table>

Above is the original basic table structure.

 $("#dnn_ctr391_Account_ctl00_ctl01_grdItems tr:first,#dnn_ctr391_Account_ctl00_ctl01_grdItems tr:last").addClass("info");

The above added a class named info to the header and footer of the table (i didn't care for any of the data in them)

From there I created a td click function to process data:

 $("#dnn_ctr391_Account_ctl00_ctl01_grdItems tr:not(.info) td:nth-child(7)").click(function() { //DO CODE HERE });

And within that click function I was able to access data from the other cells I needed:

 var warval = 0;

 warval = $(this).closest("tr").find("input[type=radio]:checked").val();

Is there a way for me to get access using the same style of coding to get access to when that cell is clicked to get the radio button value, and then leave that table to go back to the TD it is in, and then get access to the other td's using the $(this).closest("tr").find() method?

Thanks for any help you can provide.

Answer 1

Ok, from what you said in the comments, I hope this is helpful:

First of all, I would advise changing the table markup to divs. This is not mandatory, but it will lead to cleaner and more manageable code. Something like this maybe:

<p>data 1</p>
<p>data 2</p>
<div>
    <input type="radio" name="rdGroup" id="rdGroup_0" value="0" />
    <label for="rdGroup_0">No Warranty</label>
</div>
<div>
    <input type="radio" name="rdGroup" id="rdGroup_5" value="5" />
    <label for="rdGroup_5">1 year Warranty</label>
</div>
<div>
    <input type="radio" name="rdGroup" id="rdGroup_10" value="10" />
    <label for="rdGroup_10">2 year Warranty</label>
</div>
<p>data 3</p>
<div class="footer">Footer</div>

Your jQuery hook could be as simple as this:

$(function() {
    $('input[type=radio]').change(function() {
        // do whatever needs to be done here when the radio button value changes
        console.log("value '"+this.value+"' was selected for the warranty option");
    });
});​

If you need to set the corresponding value when loading the form with the data stored in your DB, you could do it with this function (if you've set your radio box IDs as shown above):

var setWarrantyOption = function(value) {
    $('#rdGroup_' + value).click();
};

You can fiddle around with the code here: http://jsfiddle.net/gruese/fsj2v/

Please tell me if that helps or if I've maybe misunderstood your problem.

Answer 2

I think you're looking for something like this:

$('table#sometable table.wTable td').click(function () {
    var isChecked = $(this).children('input[type=radio]').val();
    //To get 'back to the tr'
    var $warval = $(this).closest("tr");
});