jQuery的变量

Question

我有一个变量html存储HTML每个循环不更新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> 

基本上我需要用类开始charge的价值观为td与添加值的td班级以nc开头，并将td中的值替换为以nc开头的班级。每行中td的值都可能发生变化，因此代码需要是动态的。所以在这个例子中，在变量产生的HMTL应该是：

<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> 

在这个例子中，这实际上改变了仅排第三行。开头的td现在显示250，而不是原始0。

如果确实发生了变化，我必须在代码后面使用变量html，并更新td信息。

这是我的代码，但它不工作：

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); 

这是控制台的日志的结果：

<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> 

的HTML变量没有被更新，但我不能为了我的生活找出如何让它更新，分割变量的短缺，用类nc替换td，并在每次迭代中重新创建html变量。我认为有一个更好的方法来做到这一点。

任何帮助，非常感谢。

Answer 1

与您的代码的问题是，不能在这条线 $('[class*=nc]', html) 所述第二参数用于定义范围，其中的jQuery搜索选择用html变量。 因此，像document，parent.document（如果它的iframe等）

如果您需要原始DOM，你可以使用jQuery .clone()原来的DOM存储这样

//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); 

这里是一个小提琴http://jsfiddle.net/z4n7kjcf/

Answer 2

$(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