JavaScript添加和删除<；tr>；使用EventListener和jQuery

抱歉，代码太乱了。我对我的

$（）.ready（function（）

和单个函数应该放在哪里感到困惑

工作原理： 1）

$（“.calc”）.change（function（）

-这将使用从数据库填充的表中选择的数据更新span和divs 2） 加载页面时，在调用

$（“.calc”）.change（function（）

之前，函数

addRow（e）

设法将“hey”写入控制台日志，但由于

引用失败错误：找不到变量：tbody addRow（furniture-product.php，第396行）

一旦

$（.calc”）.change（function（））

运行时，控制台日志不再工作

什么不起作用： 1） 函数

addRow（e）

2） 功能

dow（e）

我确信这是一个小东西放错地方的例子，但我尝试过移动脚本的部分，但没有成功

$().ready(function () {

    "use strict";
    var tbody = document.getElementById("the-tbody");

    document.getElementById("btn-add").addEventListener("click", addRow, false);

    tbody.addEventListener("click", removeRow, false);


    var radios = $('input[type=radio]');
    radios.on('change', function () {
        radios.each(function () {
            var radio = $(this);
            radio.closest('.article-option')[radio.is(':checked') ? 'addClass' : 'removeClass']('highlight');
        });
    });


    $(".calc").change(function () {
        calctotal()

    });

});



function addRow(e) {
    console.log("hey");
    var product_id = $('input[name="product_name"]').val();
    var product_price = $('input[name="product_price"]').val();
    var row = document.createElement('tr');
    row.innerHTML = '<td><input type="hidden" name="item_id[]" value="' + product_id + '"><p>' + name + '</p><input type="hidden" name="price[]" value="' + product_price + '" class="price">&pound;<span id="amount" class="amount">0</span> <span class="remove">[x]</span></td>';
    tbody.appendChild(row);
    update_amounts();
}



function removeRow(e) {
    var elm;
    for (elm = e.target; elm !== this; elm = elm.parentNode) {
        if (/\bremove\b/.test(elm.className)) {
            removeElement(elm.parentNode);
            e.stopPropagation();
            return;
            update_amounts();
        }
    }
}

function calctotal() {
    var total = 0;

    var radios = $('input[type=radio]');

    radios.each(function () {
        var radio = $(this);
        radio.closest('.article-option')[radio.is(':checked') ? 'addClass' : 'removeClass']('highlight');

    });



    $(".calc:checked").each(function () {
        var a = this.value.split(",");
        total += parseFloat(a[0]);
        name = (a[1]);
        image = (a[2]);
        curtainid = (a[3]);
        curtaindesc = (a[4]);


        $("span.img").html('<div class="row curtain-img"><img src="images/furniture/' + image + '" class="img-responsive img-rounded" style="border: 5px solid #5f4865"></div>');


        $("div#product_name").html('<input type="hidden" name="product_name" value="' + curtainid + '">' + name + '');
        $("div#product_desc").html('' + curtaindesc + '');
        $("div#product_add").html('<input type="button" id="btn-add" value="Add">');
        $("div#product_price").html('<input type="hidden" name="product_price" value="' + total.toFixed(2) + '"><strong>&pound;' + total.toFixed(2) + '</strong>');

    });


}

$（）.ready（函数（）{
“严格使用”；
var tbody=document.getElementById（“tbody”）；
document.getElementById（“btn添加”）.addEventListener（“单击”，addRow，false）；
tbody.addEventListener（“单击”，删除，错误）；
变量无线电=$（'input[type=radio]'）；
收音机打开（'change'，function（）{
收音机。每个（功能（）{
var radio=$（本）；
最近的（'.article option'）[radio.is（':checked'）？'addClass'：'removeClass']（'highlight'）；
});
});
$（“.calc”）.change（函数（）{
calctotal（）
});
});
函数addRow（e）{
console.log（“嘿”）；
var product_id=$（'input[name=“product_name”]”）。val（）；
var product_price=$（'input[name=“product_price”]'）。val（）；
var行=document.createElement（'tr'）；
row.innerHTML=''+name+'
£；0[x]'；
tbody.appendChild（世界其他地区）；
更新金额（）；
}
函数（e）{
var-elm；
for（elm=e.target；elm！==this；elm=elm.parentNode）{
if（/\bremove\b/.test（elm.className））{
removeElement（elm.parentNode）；
e、 停止传播（）；
返回；
更新金额（）；
}
}
}
函数calctotal（）{
var合计=0；
变量无线电=$（'input[type=radio]'）；
收音机。每个（功能（）{
var radio=$（本）；
最近的（'.article option'）[radio.is（':checked'）？'addClass'：'removeClass']（'highlight'）；
});
$（“.calc:checked”）。每个（函数（）{
var a=此.value.split（“，”）；
总计+=浮动（a[0]）；
名称=（a[1]）；
image=（a[2]）；
curtainid=（a[3]）；
curtaindesc=（a[4]）；
$（“span.img”）.html（“”）；
$（“div#product_name”）.html（“”+name+“”）；
$（“div#product_desc”）.html（“”+curtaindesc+“”）；
$（“div#product_add”）.html（“”）；
$（“div#product#u price”）.html（“£；”+total.toFixed（2）+“”）；
});
}

很简单，HTML是

<table id="myTable">

<tbody id="the-tbody"></tbody>

</table>

<input type="button" id="btn-add" value="Add">

---

JS小提琴：

啊。。你们都做对了。只需在上面定义变量，即在document.ready（）之前

---

这段代码有很多问题——太多了，无法列出

这是一个工作版本，去掉了一些原始代码，只剩下原始的添加/删除功能

HTML

<table id="myTable" border>
    <thead>
        <tr><th>Product</th><th>Unit Price</th><th>Quantity</th><th>Total Price</th><th>Remove</th></tr>
    </thead>
    <tbody id="the-tbody"></tbody>
    <tr><td id="totalCell" colspan="5">Total: &pound;<span id="total"></span></td></tr>
</table>
<input type="button" id="btn-add" value="Add" />

产品单价数量总价删除
总计：英镑；

Javascript

$(function() {
    "use strict";
    $("#btn-add").on('click', addRow);
    var tbody = $("#the-tbody").on('click', '.remove', removeRow);//delegate click handling to the tbody element.
    calc();

    function calc() {
        var sum = 0;
        $('tr.product').each(function() {
            var qty = Number($(this).find('.qty').text()),
                price = Number($(this).find('.price').text()),
                amount = (qty * price).toFixed(2);
            $(this).find('.amount').text(amount);
            sum += Number(amount);
        });
        $('#total').text(sum.toFixed(2));
    }
    function addRow(e) {
        $('<tr class="product"><td>Sample Product</td><td>&pound;<span class="price">1.00</span></td><td><span class="qty">1</span></td><td>&pound;<span class="amount"></span></td><td><span class="remove">[x]</span></td></tr>').appendTo(tbody);
        calc();
    }
    function removeRow(e) {
        $(this).closest("tr").remove();
        calc();
    }
});

$（函数（）{
“严格使用”；
$（“#btn添加”）。在（'click'，addRow'）；
var tbody=$（“#tbody”）.on（'click'，'.remove'，removeow）；//将单击处理委托给tbody元素。
计算（）；
函数计算（）{
var总和=0；
$（'tr.product'）。每个（函数（）{
变量数量=编号（$（this）.find（'.qty'）.text（）），
price=Number（$（this）.find（'.price'）.text（）），
金额=（数量*价格）.toFixed（2）；
$（this）.find（'.amount'）.text（amount）；
总和+=数量（金额）；
});
$（'总计'）.text（sum.toFixed（2））；
}
函数addRow（e）{
$（‘样本产品£；1.001£；[x]'）。附录（t正文）；
计算（）；
}
函数（e）{
$（this）.tr.remove（）；
计算（）；
}
});

请注意删除按钮的单击操作是如何委托给tbody元素的。这对于确保以后添加的每个移除按钮（作为产品行的一部分）都具有所需的操作而无需单独附加单击处理程序是必要的

---

还请注意，所有辅助函数，

addRow（）

、

removeow（）

和

calc（）

现在都在

$（function（）{}）

结构中定义。这确保了变量（如

tbody

保持在范围内（不诉诸全局范围）。

某些方面很难可视化。你能做一张请柬吗？小提琴没有定义：错误来了。请添加jquery库的引用。1。您应该添加jquery库，2。您应该添加文档dom作为ready function元素，3.您应该在末尾包含ready function:Fiddle可以添加tr，但是会出现错误：找不到变量：removelement

$(function() {
    "use strict";
    $("#btn-add").on('click', addRow);
    var tbody = $("#the-tbody").on('click', '.remove', removeRow);//delegate click handling to the tbody element.
    calc();

    function calc() {
        var sum = 0;
        $('tr.product').each(function() {
            var qty = Number($(this).find('.qty').text()),
                price = Number($(this).find('.price').text()),
                amount = (qty * price).toFixed(2);
            $(this).find('.amount').text(amount);
            sum += Number(amount);
        });
        $('#total').text(sum.toFixed(2));
    }
    function addRow(e) {
        $('<tr class="product"><td>Sample Product</td><td>&pound;<span class="price">1.00</span></td><td><span class="qty">1</span></td><td>&pound;<span class="amount"></span></td><td><span class="remove">[x]</span></td></tr>').appendTo(tbody);
        calc();
    }
    function removeRow(e) {
        $(this).closest("tr").remove();
        calc();
    }
});