添加到另一個函數

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/