如何计算由append创建的元素？

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类计算值= 'ORDERNUMBER' * TD类= '订单价格'

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

的Jquery：

$(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(); 
    }); 
}); 

演示类属性：Fiddle

Answer 2

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

如果要计算总价只需做到这一点

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

虽然这总是会得到第一＃工作场所和＃号职场价值的值。

即使按下第二个按钮。