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

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

我不认为，考虑到创建这个的任务，我会选择按照你的方式来做。

但是，使用现有代码，您可以在更改、粘贴或键入时绑定(bind)旅行值，并在任何这些操作上运行函数。在该函数中，我使用正则表达式从“.wie-grand-total”中删除了特殊字符($)，并使用 parseFloat 将“.wie-grand-total”的值转换为 float 。我还使用 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);
});

用于演示的 fiddle (现在每个评论都有隐藏值) http://jsfiddle.net/chrislewispac/wed6eog0/3/

这里唯一潜在的问题是它仅在您更改、粘贴或键入 #TravelVis 中的值时运行。

/自评论以来已进行解释/

它是我添加了带有输入的 td 的 html。输入 id="travelHid"。然后我通过应用 jQuery 方法 .hide() 使其不可见。然后，我将 TravelVal 暴露到全局范围，并使用零值启动它，然后创建一个函数来更新该值。

在该函数中，我将值设置为参数travelVal，如果没有参数，则将值设置为0。然后我立即调用它。

然后，我使用绑定(bind)函数中的 arg tripVal 添加了对该函数的调用，以便在存在值时更新它。

最后:

只需向表中添加一行，预设值为“行程”和“定量 1”。

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