CODEWITHSUNDEEP
javascriptjqueryhtmleach
Michael
Michael

Reputation: 2046

jQuery Each Loop Not updating HTML in variable

I have a variable html that 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 I need to add the values for the td with the class starting with charge to the values for the td with the class starting with nc and replace the value in the td with class starting with nc with the sum. The values in both td's in each row could change, so the code needs to be dynamic. So for this example, the resulting HMTL in the 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 this example, the only row that actually changes is the third row. The td starting with class nc now shows 250 instead of the original 0.

I have to use the variable html later in the code with the updated td information if it did change.

This is the code that I have, but 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 is the results of the 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, but I can't for the life of me figure out how to get it to update, short of splitting the variable, replacing the td with class nc, and recreating the html variable on each iteration. I'm thinking there's got to be a better way to do this.

Any help is very much appreciated.

Upvotes: 1

Views: 906

Answers (2)

tinker
tinker

Reputation: 925

The problem with you code is that you cannot use html variable in this line $('[class*=nc]', html) the second parameter is used to define scope in which jQuery searches for the selector. So, like document,parent.document(if its iframe etc..)

If you need the original dom you can use jQuery .clone() to store the original dom like this

//if you require the original code for later clone it 
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 is a fiddle http://jsfiddle.net/z4n7kjcf/

Upvotes: 1

amit_g
amit_g

Reputation: 31250

$(function () {
    var $chargeTable = $("#chargetable");
    var $chargeTableCloned = $chargeTable.clone();
    var $chargeTableRows = $("tr", $chargeTableCloned);

    $.each($chargeTableRows, function(i, $tr){
        var $tdCharge = $("td[class^='charge']", $tr);
        var $tdNc = $("td[class^='nc']", $tr);
        var charge = parseInt($tdCharge.text(), 10);
        var nc = parseInt($tdNc.text(), 10);
        $tdNc.text(charge + nc);
    });

    $chargeTable.after($chargeTableCloned);
});

Example

Upvotes: 0

Related Questions