Question

i have some tr tags with a checkbox in each and when the user clicks on any of the checkboxes i want the content from that tr to be written anywhere on the page

Here is the HTML:

<tr class="gradeA odd">
 <td><input id="instance_selected0" name="instance_selected0" value="2" type="checkbox"></td>
 <td>September 15, 2010</td>
 <td>Melbourne Vic</td>
</tr>
<tr class="gradeU even">
 <td><input id="instance_selected1" name="instance_selected1" value="2" type="checkbox"></td>
 <td>Thursday September 16, 2010 at 07:00 PM</td>
 <td>Sydney Nsw</td>
</tr>

So if the user clicks on the first checkbox i need this to be inserted in the page in the div class .fields. this div is already on the page and its empty currently.

This is what i need to be inside it

<input id="request_venue" name="request[venue]" type="hidden" value="Melbourne Vic" /></div>
<input id="request_showdate" name="request[showdate]" type="hidden" value="September 15, 2010" />   

any ideas

Answer 1

$(".gradeA, .gradeU").find(":checkbox").click(function() {
    if (this.checked === false) { return; }
    var cells = $(this).parent().siblings();
    $(".fields").empty().append($("<input type='hidden'>").attr({
        id: "request_venue",
        name: "request[venue]",
        value: cells[1].innerHTML
    })).append($("<input type='hidden'>").attr({
        id: "request_showdate",
        name: "request[showdate]",
        value: cells[0].innerHTML
    }));    
});

Note: I did not test this.