Question

我有一个存储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>

基本上我需要将td的值与以charge开头的类添加到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开始的nc现在显示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变量没有被更新，但我不能为我的生活找出如何让它更新，缺少拆分变量，用类替换td nc，并在每次迭代时重新创建html变量。我认为必须有更好的方法来做到这一点。

非常感谢任何帮助。

Answer 1

您的代码问题是您不能在此行中使用html变量 $('[class*=nc]', html) 第二个参数用于定义jQuery搜索选择器的范围。所以，就像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

jQuery每个循环不更新变量中的HTML

2 个答案: