javascript - jQuery Each Loop Not updating HTML in variable -
i have variable html
stores html:
<tr class="odd"> <td class="charge1">0</td> <td class="nc1">0</td> </tr> <tr class="even"> <td class="charge2">0</td> <td class="nc2">0</td> </tr> <tr class="odd"> <td class="charge3">250</td> <td class="nc3">0</td> </tr>
basically need add values td
class starting charge
values td
class starting nc
, replace value in td
class starting nc
sum. values in both td
's in each row change, code needs dynamic. example, resulting hmtl in variable should be:
<tr class="odd"> <td class="charge1">0</td> <td class="nc1">0</td> </tr> <tr class="even"> <td class="charge2">0</td> <td class="nc2">0</td> </tr> <tr class="odd"> <td class="charge3">250</td> <td class="nc3">250</td> </tr>
in example, row changes third row. td
starting class nc
shows 250
instead of original 0
.
i have use variable html
later in code updated td
information if did change.
this code have, it's not working:
var html = $('#chargetable').html(); console.log(html); $('[class*=nc]', html).each(function(){ var ncamount = $(this).html(); var chargeamount = $(this).parents('tr').find('[class*=charge]').html(); var totalnc = parsefloat(chargeamount) + parsefloat(ncamount); $(this).html(totalnc); console.log(chargeamount + ' ' + ncamount + ' ' + totalnc); }); console.log(html);
this results of console's log:
<tr class="odd"> <td class="charge1">0</td> <td class="nc1">0</td> </tr> <tr class="even"> <td class="charge2">0</td> <td class="nc2">0</td> </tr> <tr class="odd"> <td class="charge3">250</td> <td class="nc3">0</td> </tr> 0 0 0 0 0 0 250 0 250 <tr class="odd"> <td class="charge1">0</td> <td class="nc1">0</td> </tr> <tr class="even"> <td class="charge2">0</td> <td class="nc2">0</td> </tr> <tr class="odd"> <td class="charge3">250</td> <td class="nc3">0</td> </tr>
the html variable isn't being updated, can't life of me figure out how update, short of splitting variable, replacing td
class nc
, , recreating html
variable on each iteration. i'm thinking there's got better way this.
any appreciated.
the problem code cannot use html variable in line $('[class*=nc]', html)
second parameter used define scope in jquery searches selector. so, document
,parent.document
(if iframe etc..)
if need original dom can use jquery .clone()
store original dom this
//if require original code later clone var htmlclone = $('#chargetable').clone().html(); console.log(htmlclone); $('#chargetable [class*=nc]').each(function(){ var ncamount = $(this).html(); var chargeamount = $(this).parents('tr').find('[class*=charge]').html(); var totalnc = parsefloat(chargeamount) + parsefloat(ncamount); $(this).html(totalnc); console.log(chargeamount + ' ' + ncamount + ' ' + totalnc); }); console.log(htmlclone);
here fiddle http://jsfiddle.net/z4n7kjcf/
Comments
Post a Comment