javascript - 在动态创建的行的末尾附加一个 div

Question

我有动态创建的行，我想在每行的末尾附加一个 div。我尝试了不同的方法来实现这一点。有一次我最终将 div 附加到每一行，但每次添加一行时前几行都会得到额外的 div。我只希望一行始终有 1 个取消 div。 (这就像一个取消按钮，因此用户可以删除该行)。

在这段代码中，我试图通过行类遍历每一行，并检查该行是否有一个类为“取消”的子项，如果没有则追加 div 取消。它第一次有效，但其他时间无效。

$('.row').each(function(){
 if($(".row").children(".cancel").length == 0){
    $("<div class = 'cancel'>test</div>").appendTo('.row')
}   
})

当我像这样追加行时，我试图在 else 语句中添加 div“cancel”

 if($(".table").html().length <= 0)
 {
    $('.table').append($("<table>").append(tableheader).append(tr));

}else{
    if($(".table").html().length > 0){
        $("table").append(tr).append("<div class = 'cancel'>test</div>")

    }

}

但是根本没有出现

我知道我可能会向 var tr 添加另一个 td 以使用 div 创建一个新列，但我想知道为什么我以上述方式进行的努力没有成功。它应该工作。请原谅我的无知。

这里是 jsfiddle用于说明。也许其他地方的代码有问题。

我认为您可以帮助我解决代码中的另一个问题。它与总计列中的总金额。格式为 7.5 而不是 7.50，正常的美元定价数字。当我在烤鸡排上选择 qnty = 3 时，总数是 38.849999999999994 我认为 toFixed(2) 和 parseFloat 可以解决这个问题，但它们没有用。显然我想要 38.85。

Answer 1

我认为问题在于您在附加 div 时访问表格行的方式。

$('.row').each(function(){
    if($(".row").children(".cancel").length == 0){
        $("<div class = 'cancel'>test</div>").appendTo('.row')
    }   
});

上面的脚本总是在附加 div 时搜索类 .row。所以如果你有一个 div 附加到任何一个 .row 类，如果条件失败。

解决方法:

要解决此问题，请使用 $(this) 访问循环中的每一行。

$('.row').each(function(){
    if($(this).children(".cancel").length == 0){
        $("<div class = 'cancel'>test</div>").appendTo($(this))
    }   
});

还要修复您的第二个价格问题，更改

$(".total",$row).html(parseFloat(qnty * price));

到

$(".total",$row).html(parseFloat(qnty * price).toFixed(2));

检查更新的 Demo Fiddle .