Question

I have a table produced dynamically with each row producing something like this:

 <tr name="0">
  <td style="text-align:left;">January</td>
  <td><input type="text" name="LIB1" value="0" class="oneInput row0" /></td>
  <td><input type="text" name="RPI1" value="0" class="oneInput row0" /></td>
  <td><input type="text" name="LMM1" value="0" class="oneInput row0" /></td>
  <td><b><span class="screenOneTotal">0</span></b></td>
</tr>

I need to put the total of each input in the row in the last column when a value is input. Therefore, I placed this function in the document.ready function

$(".oneInput").live('blur', function(){
 var rowID = $(this).parent().parent().attr( 'name' );
 var thisLIB = $("input[name=LIB + rowID]" ).val();
 var thisRPI = $("input[name=RPI + rowID]").val();
 var thisLMM = $("input[name=LMM + rowID]").val();
 var rowTotal = parseFloat(thisLIB) + parseFloat(thisRPI) + parseFloat(thisLMM);
 $(this).parent().parent().find( 'span.screenOneTotal').empty().html( parseFloat(rowTotal) );
});

Despite the fact that I am explicitly casting each value to a float, the value inserted into the last column is “NaN”.

Answer 1

I think you’re overcomplicating things (and undercomplicating them at the same time). Your over-complication is that you’re looking for three specific things and treating them individually when you could just grab everything that fits a certain pattern and treat them as a group. Your under-complication is that you’re not considering failure conditions from parseFloat and the odd (until you’re used to it) behavior of NaN.

I think you’d be better off going up the DOM to find the containing <tr> and the iterating through all the .oneInput elements in that row, then you can use one small chunk of code to convert the string values to sensible numbers the same way:

$(".oneInput").live('blur', function() {
    var $row     = $(this).closest('tr');
    var rowTotal = 0;
    $row.find('input.oneInput').each(function() {
        var n = parseFloat(this.value);
        if(!isNaN(n))
            rowTotal += n;
    });
    // Do whatever you need to do with rowTotal
});

The closest call will go up the DOM to find the containing <tr>, then the find will get all the <input> elements in that row that have a class of oneInput, then loop over those with each, extract each value straight from the <input> DOM element with parseFloat, and add them to a running total in rowTotal if parseFloat finds a number (and isNaN is the what you want to check if parseFloat handed you a NaN).

Something like this: http://jsfiddle.net/ambiguous/DBQL3/