binding onblur and onclick events using jQuery to show the next tr in a table that is already hidden

Okay, this will be the last question, although I'm learning alot about jQuery from you guys so thanks!

Okay as I've mentioned previously (see original)... "I'm currently having to extend an very old ASP.NET site which has a database generated front end and is a behemoth of an application, it needs completely rewriting - however I've been told to add to it than redevelop it "

Okay, the backend renders a table which I have little control over, it produces element names and ids using GUID (or something). I've amended the backend to output 4 rows in a table (the example shows one row but all have the same structure just different names and ids), jQuery loops through this table, switching the innerHTML of one cell to another and hiding some of the rows. It traverses the table and returns the radio button group name on a specific row. It also take the value of the textbox on that row too, I'll need this later...

<table id="tableID">
    <开发者_高级运维;tr>     
        <td class="qCol">     
        <!-- Label here -->     
        </td>      
        <td class="qCo2">     
        <!-- img here -->     
        <!-- and a text box --> 
                  <input type="text" name="*" id="*" class="currentPaymentAmount"/>
        </td>      
        <td class="qCo3">     
        <!-- select menu here -->     
        </td>      
        <td class="qCo4">     
        <!-- 2 radio buttons here -->     
        </td>      
        <td class="qCo5">     
        <!-- select menu here -->     
        </td>     
        <td class="qCo6">     
        <!-- hidden validation image here -->     
        </td> 
    <tr> 
</table> 

I now want to extend the jQuery so if a radio button is checked on that row and the text box with the class of currentPaymentAmount on the same row has a length larger than zero the next row is displayed (which should be hidden).

Here's my jQuery so far...

    $('#tableID tr').each(function (i) {          

        /*switch select and validation and clear */         
        $(this).children('td.qCol').html($(this).children('td.qCo5').html());
        $(this).children('td.qCo5').html("");        
        /* hide all but the first row*/        
         if (i >= 1) {            
            $(this).hide();
         }

         /* get the radio button name and check if either are selected also see if the text box exists*/
        if ($(this).find('input:radio').attr('name') & $(this).find('input.currentPaymentAmount')) {
            var thisRadioName = $(this).find('input:radio').attr('name');
            var thisAmount = $.trim($(this).find('input.currentPaymentAmount').val());

/* now check to see if either of the radio buttons are checked and the textbox has a value*/

}

I now need to check that one of the checkboxes are checked and the legth of the amount is greater than zero, if all is well I want to show the next row (which should be hidden)... something like this

     /* now check to see if either of the radio buttons are checked and the textbox has a value*/


if ($(this).find('input[name=' + thisRadioName + ']:checked') && amount.length > 0) {
        $(this).next().show();

}

I'll then have to bind these to a blur event on the text box and the onclick of the radio buttons... how on earth do I do this?

I realise how complicated this is and my explaination is pretty awful. I'd find this easier in JavaScript but I wish to start using jQuery so I write less!

You could do

$('.qCo5 input.currentPaymentAmount').blur(function(){
     if ($(this).val().length >0){
        $(this).closest('tr').next('tr').show();
     }
});

and

$('.qCo5 input:radio').click(function(){
     if ($(this).is(':checked')){
        $(this).closest('tr').next('tr').show();
     }
});