jquery - 如何计算附加创建的元素？

Question

我想计算价格*数量的摘要怎么做？

表 1：单击添加以在表 2 中创建详细信息

<table width="60%" border="1">
          <tr>
                <td align="center">menu</td>
            <td align="center">quantity</td>
            <td align="center">price</td>
                <td>&nbsp;</td>
            </tr>
          <tr id="workplace-view-menu">
          <td id="workplace-menu">coffee</td>
    <td id="workplace-number">5</td>
    <td id="workplace-price">50</td>
    <td align="center"><input type="button" value="add" id="workplace-submit" name="workplace-submit" class="btn-green">
</td>
</tr>
          <tr id="workplace-view-menu">
          <td id="workplace-menu">food</td>
    <td id="workplace-number">2</td>
    <td id="workplace-price">70</td>
    <td align="center"><input type="button" value="add" id="workplace-submit" name="workplace-submit" class="btn-green">
</td>
</tr>
</table>

表 2：jquery 创建元素并计算 td class='ordernumber' * td class='order-price' 中的值

<table width="200" border="1" id="order-detial">
            <tr>
              <td>menu</td>
              <td>quantity</td>
              <td>price</td>
              <td></td>
            </tr>
</table>
<div id="calculator"></div>

查询：

$(document).ready(function(){
    $('#workplace-submit').click(function(){
        var menu=$('#workplace-menu-name').val();
        var number=$('#workplace-number').val();
        var price=$('td#workplace-price').text();
        $('#order-detial').append('<tr class="order-detials"><td>'+menu+'</td><td class="order-number">'+number+'</td><td class="order-price">'+price+'</td><td><button class="btn-green"  onclick="OrderRemove(this)">delete</button></td></tr>');

    OrderRemove = function(el) {
        $(el).parents("tr").remove();
    }

});

Answer 1

由于您有重复的 id 值，请使用类属性，例如

<table width="60%" border="1">
    <tr>
        <td align="center">menu</td>
        <td align="center">quantity</td>
        <td align="center">price</td>
        <td>&nbsp;</td>
    </tr>
    <tr class="workplace-view-menu">
        <td class="workplace-menu">coffee</td>
        <td class="workplace-number">5</td>
        <td class="workplace-price">50</td>
        <td align="center">
            <input type="button" value="add" class="workplace-submit" name="workplace-submit" class="btn-green" />
        </td>
    </tr>
    <tr class="workplace-view-menu">
        <td class="workplace-menu">food</td>
        <td class="workplace-number">2</td>
        <td class="workplace-price">70</td>
        <td align="center">
            <input type="button" value="add" class="workplace-submit" name="workplace-submit" class="btn-green" />
        </td>
    </tr>
</table>
<table width="200" border="1" id="order-detial">
    <tr>
        <td>menu</td>
        <td>quantity</td>
        <td>price</td>
        <td></td>
    </tr>
</table>
<div id="calculator"></div>

然后

$(document).ready(function () {
    var $orderDetial = $('#order-detial');

    $('.workplace-submit').click(function () {
        var $tr = $(this).closest('tr');
        var menu = $.trim($tr.find('.workplace-menu').text());
        var number = $.trim($tr.find('.workplace-number').text());
        var price = $.trim($tr.find('.workplace-price').text());
        $('<tr class="order-detials"><td>' + menu + '</td><td class="order-number">' + number + '</td><td class="order-price">' + price + '</td><td><button class="btn-green btn-delete">delete</button></td></tr>').appendTo($orderDetial).data('total', (parseInt(number) * parseFloat(price)) || 0);

        recalc();

    });

    function recalc() {
        var total = 0;
        $orderDetial.find('tr.order-detials').each(function () {
            total += ($(this).data('total') || 0)
        });

        $('#calculator').text(total)
    }

    $orderDetial.on('click', '.btn-delete', function () {
        $(this).parents("tr").remove();
        recalc();
    });
});

演示：小提琴

Answer 2

首先，ID 是唯一的，您不应该两次使用相同的 ID。而是使用类。

如果您想计算总价，只需执行此操作

var number=$('#workplace-number').val();
var price=$('td#workplace-price').text();
var subtotal = parseInt(number) * parseFloat(price);

尽管这将始终获得第一个#workplace-number 和 #workplace-price 值的值。

即使按下第二个按钮。