开发者

jQuery Formula posts 'NaN' although each value is cast

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 t开发者_高级运维ype="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".


$("input[name=LIB + rowID]" ).val() does not look right.

Did you mean $("input[name=LIB" + rowID + "]" ).val()?


If your selector fails, then .val() is empty and parseFloat will give you NaN.


In addition to Tomalak's answer, an attribute selector should also be enclosed in quotes. Your example also shows that the row's name attribute is 0 but its children are LIB1, LPT1 and LMM1 so they need to be under a row with name='1'

var thisLIB = $("input[name='LIB" + rowID+"']" ).val();


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/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜