Question

很难解释，您可以看到 DEMO HERE

我有一个产品表，可以动态创建/删除新的产品系列。我还有一个总计表，总计每行的总数。

在该总计框中，我有一个旅行箱我想要添加到总计，但我遇到的问题是旅行输入在表格之外，总计所有值。我可以用新的总数替换总数，但我似乎无法调用子总数，添加旅行和输出总计。

HTML

<table class="order-details">
    <tbody>
    <tr>
        <td><input type="text" value="" name="" placeholder="Work Description" class="wei-add-field description 1"/></td>
        <td><input type="text" value="" name="" placeholder="QTY" class="wei-add-field quantity 1" /></td>
        <td><input type="text" value="" name="" placeholder="$0.00" class="wei-add-field unit-price 1"/></td>
        <td><input type="text" value="" name="" placeholder="$0.00" class="wei-add-field price-total 1" id=""/></td>
        <td> </td>
    </tr>
    </tbody>
</table>

<div class="wei-add-service"><a href="#" class="button-secondary wei-add-service-button">Add Item</a></div>

<table class="wei-add-totals">
    <tr>
        <td width="50%">Sub Total</td>
        <td width="50%" class="wie-add-subtotal"> </td>
    </tr>

    <tr class="alternate travel">
        <td>Travel</td>
        <td><input type="text" value="" placeholder="0.00" class="wei-add-field travel" /></td>
    </tr>
    <tr>
        <td>Taxes</td>
        <td><input type="text" value="" placeholder="0.00" class="wei-add-field wie-total-taxes" id="wei-disabled" disabled/> </td>
    </tr>
    <tr class="alternate total">
        <td>Total</td>
        <td><input type="text" value="" placeholder="0.00" class="wei-add-field wie-grand-total" id="wei-disabled" disabled/></td>
    </tr>
</table>

的Javascript

var counter = 1;
var testArray =  [ 2,3,4,5];

jQuery('a.wei-add-service-button').click(function(event){
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr><td><input type="text" class="wei-add-field description ' + counter + '"/></td><td><input type="text" class="wei-add-field quantity ' + counter + '" /></td><td><input type="text" class="wei-add-field unit-price ' + counter + '"/></td><td><input type="text" value="" name="" placeholder="$0.00" class="wei-add-field price-total ' + counter + '" id=""/></td><td><a href="#">X</a></td></tr>');
    jQuery('table.order-details').append(newRow);
});


jQuery('table.order-details').on('click','tr a',function(e){
    e.preventDefault();
    var table = $(this).closest('table');
    jQuery(this).parents('tr').remove();
    reCalculate.call( table );
});


jQuery('table.order-details').on("keyup", "tr", reCalculate);

function reCalculate() {
    var grandTotal = 0;
    jQuery(this).closest('table').find('tr').each(function() {
        var row = jQuery(this);
        var value = +jQuery( ".unit-price", row ).val();
        var value2 = +jQuery( ".quantity", row ).val();
        var total = value * value2;
        grandTotal += total;
        jQuery( ".wei-add-field.price-total", row ).val( '$' + total.toFixed(2) );
    });
    jQuery(".wie-add-subtotal").text( '$' + grandTotal.toFixed(2));
}

Answer 1

我不认为，鉴于创造这个的任务，我会选择以你的方式去做。

但是，使用现有代码，您可以在更改，粘贴或键入时绑定Travel值，并在任何这些操作上运行函数。在该函数中，我使用正则表达式从“.wie-grand-total”中删除了特殊字符（$），并使用parseFloat将“.wie-grand-total”的值转换为浮点数。我还使用parseFloat将Travel值转换为float。然后我将它们加在一起，并将总和作为“wie-grand-total”的新值。

/* NEW SINCE COMMENTS */

//Add to your HTML New table

<table class="order-details">
  <tbody>
  <tr>
      <td><input type="text" value="" name="" placeholder="Work Description" class="wei-add-field description 1"/></td>
      <td><input type="text" value="" name="" placeholder="QTY" class="wei-add-field quantity 1" /></td>
      <td><input type="text" value="" name="" placeholder="$0.00" class="wei-add-field unit-price 1"/></td>
      <td><input type="text" value="" name="" placeholder="$0.00" class="wei-add-field price-total 1" id=""/></td>

      /* NEW SINCE COMMENTS*/
      <td><input type="text" id="travelHid" value=""></td>

      <td> </td>
  </tr>
  </tbody>
</table>



/* NEW SINCE COMMENTS */

$('#travelHid').hide();
var travelVal = 0;
function updateTravelVal(travelVal){
     var  travelVal = travelVal;
     $('#travelHid').val(travelVal);
};
updateTravelVal();


$("#travelVis").bind("change paste keyup", function() {
    var noChars = jQuery(".wie-grand-total").val().replace(/[^0-9.]/g, "");
    var newTot = parseFloat(noChars) + parseFloat($(this).val());
    jQuery(".wie-grand-total").val( '$' + newTot.toFixed(2));


     //added error checking
     var checkError = jQuery(".wie-grand-total").val( '$' + newTot.toFixed(2));

      //if the value that would go in input is NaN then use travelVal
      //since there is no value in .wie-grand-total yet
        if (typeof checkError !== "string") {
          jQuery(".wie-grand-total").val( '$' + travelVal.toFixed(2))
        } else if (typeof checkError === "string") {
         jQuery(".wie-grand-total").val( '$' + newTot.toFixed(2))   
        } 

      /* NEW SINCE COMMENTS */

      updateTravelVal(travelVal);
});

演示的小提琴（现在每条评论都有hiddenVal） http://jsfiddle.net/chrislewispac/wed6eog0/3/

此处仅存在潜在问题，只有在#TravelVis中更改，粘贴或键入值时才会运行。

/ 自评论后解释 /

html我添加了一个带输入的td。输入id =“travelHid”。然后我通过应用jQuery方法.hide（）使其不可见。然后我将travelVal暴露给全局范围，并使用零值启动它，然后创建一个更新该值的函数。

在该函数中，我将值设置为参数travelVal，如果没有参数，则设置为0。然后我马上打电话给它。

然后，我使用绑定函数中的arg travelVal调用该函数，以便在存在值时更新它。

最后：

只需在预设值为Travel和Quant 1的表格中添加一行。

http://jsfiddle.net/chrislewispac/xntn7p5p/5/

添加到另一个函数中声明的值

1 个答案: