添加到另一个函数

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”的值转换为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); 
}); 

一种示范小提琴（现在根据注释hiddenVal） http://jsfiddle.net/chrislewispac/wed6eog0/3/

唯一潜在这里的问题是它只能运行在您更改，粘贴，或钥匙起来#TravelVis价值。

/EXPLAINED因为评论/

它我添加了一个与TD输入的HTML。输入ID =“travelHid”。然后我通过应用jQuery方法.hide（）来隐藏它。然后，我将travelVal暴露给全局作用域，并以零值启动它，然后创建一个函数来更新该值。

在该函数中，我将该值设置为参数travelVal或设置为0（如果没有参数）。然后我立即给它打电话。

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

最后：

只需添加一行到表旅游的预设值和定量1.

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