jQuery計算單獨的行，然後總計 - 生活

Question

建立一個計算器，並不知道從哪裏開始。

我有一個計算器有幾行 - 項目，項目成本，數量輸入，然後是該項目的總數。用戶將輸入數量爲一些的項目。計算器將需要顯示每個項目的實際成本（沒有按鈕），然後所有總計都需要添加並計算總計（顯示在底部）。

<div class="calculator"> 
    <div class="table"> 
    <div class="table-body"> 
     <div class="table-row"> 
     <div class="table-cell">Item 1</div> 
     <div class="table-cell">$25</div> 
     <div class="table-cell"> 
      <input type="text" class="form-control" id="" placeholder="-"> 
     </div> 
     <div class="table-cell">= </div> 
     </div> 

     <div class="table-row"> 
     <div class="table-cell">Item 2</div> 
     <div class="table-cell">$20</div> 
     <div class="table-cell"> 
      <input type="text" class="form-control" id="" placeholder="-"> 
     </div> 
     <div class="table-cell">= </div> 
     </div> 

     <div class="table-row"> 
     <div class="table-cell">Item 3</div> 
     <div class="table-cell">$25</div> 
     <div class="table-cell"> 
      <input type="text" class="form-control" id="" placeholder="-"> 
     </div> 
     <div class="table-cell">= </div> 
     </div> 

     <div class="table-row"> 
     <div class="table-cell">Item 4</div> 
     <div class="table-cell">$30</div> 
     <div class="table-cell"> 
      <input type="text" class="form-control" id="" placeholder="-"> 
     </div> 
     <div class="table-cell">= </div> 
     </div> 

     <div class="table-row"> 
     <div class="table-cell">Item 5</div> 
     <div class="table-cell">$25</div> 
     <div class="table-cell"> 
      <input type="text" class="form-control" id="" placeholder="-"> 
     </div> 
     <div class="table-cell">= </div> 
     </div> 

     <div class="table-row footer"> 
     <div class="table-cell">Total</div> 
     <div class="table-cell">&nbsp;</div> 
     <div class="table-cell">&nbsp;</div> 
     <div class="table-cell">= $10,000 </div> 
     </div> 
    </div> 
    </div> 
</div> 

我已經包括這裏的jsfiddle：https://jsfiddle.net/xgL4q8w6/

任何建議，我應該如何處理呢？

謝謝！

Answer 1

我添加了名爲<div class="table-cell result"></div>

然後我添加了一個類的另一列所謂.sum

我還添加了數據屬性的行與項目的成本總，是這樣的：

<div class="table-cell" data-value="25">$25</div>

然後我添加了一個事件監聽器，當用戶按下鍵盤上的一個按鍵時就會動作。

見演示

$(function() { 
 
    $("input:text").on("keyup", function() { 
 
    var rowEl = $(this).closest(".table-row"); 
 
    var inputStr = $(this).val(); 
 
    var multiplier = rowEl.find("[data-value]").data('value'); 
 
    var sum = 0; 
 

 
    rowEl.find('.result').html(parseInt(inputStr * multiplier) || '?'); 
 

 
    $('.result').each(function (index, element) { 
 
     //console.log($(element).html()); 
 
     sum += parseInt($(element).html()) || 0; 
 
    }); 
 

 
    $(".footer .sum").html("$" + sum); 
 
    }); 
 
});

.calculator .table { 
 
    display: table; 
 
    width: auto; 
 
    margin: 0 auto; 
 
} 
 

 
.calculator .table-row { 
 
    display: table-row; 
 
} 
 

 
.calculator .table-row.bottom .table-cell { 
 
    padding-bottom: 20px; 
 
} 
 

 
.calculator .table-row.footer { 
 
    font-size: 30px; 
 
    font-weight: 100; 
 
} 
 

 
.calculator .table-row.footer .table-cell { 
 
    padding-top: 10px; 
 
    border-top: 1px solid #D1D3D4; 
 
} 
 

 
.calculator .table-heading { 
 
    background-color: #EEE; 
 
    display: table-header-group; 
 
} 
 

 
.calculator .table-cell { 
 
    display: table-cell; 
 
    padding: 3px 0px; 
 
    text-align: left; 
 
} 
 

 
.calculator .table-cell input { 
 
    width: 80px; 
 
    text-align: center; 
 
} 
 

 
.calculator .table-cell:not(:first-child) { 
 
    padding-left: 50px; 
 
} 
 

 
.calculator .table-body { 
 
    display: table-row-group; 
 
} 
 

 
.result { 
 
    text-align: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="calculator"> 
 
    <div class="table"> 
 
    <div class="table-body"> 
 
     <div class="table-row"> 
 
     <div class="table-cell">Item 1</div> 
 
     <div class="table-cell" data-value="25">$25</div> 
 
     <div class="table-cell"> 
 
      <input type="text" class="form-control" id="" placeholder="-"> 
 
     </div> 
 
     <div class="table-cell">= </div> 
 
     <div class="table-cell result"></div> 
 
     </div> 
 

 
     <div class="table-row"> 
 
     <div class="table-cell">Item 2</div> 
 
     <div class="table-cell" data-value="20">$20</div> 
 
     <div class="table-cell"> 
 
      <input type="text" class="form-control" id="" placeholder="-"> 
 
     </div> 
 
     <div class="table-cell">= </div> 
 
     <div class="table-cell result"></div> 
 
     </div> 
 

 
     <div class="table-row"> 
 
     <div class="table-cell">Item 3</div> 
 
     <div class="table-cell" data-value="25">$25</div> 
 
     <div class="table-cell"> 
 
      <input type="text" class="form-control" id="" placeholder="-"> 
 
     </div> 
 
     <div class="table-cell">= </div> 
 
     <div class="table-cell result"></div> 
 
     </div> 
 

 
     <div class="table-row"> 
 
     <div class="table-cell">Item 4</div> 
 
     <div class="table-cell" data-value="30">$30</div> 
 
     <div class="table-cell"> 
 
      <input type="text" class="form-control" id="" placeholder="-"> 
 
     </div> 
 
     <div class="table-cell">= </div> 
 
     <div class="table-cell result"></div> 
 
     </div> 
 

 
     <div class="table-row"> 
 
     <div class="table-cell">Item 5</div> 
 
     <div class="table-cell" data-value="25">$25</div> 
 
     <div class="table-cell"> 
 
      <input type="text" class="form-control" id="" placeholder="-"> 
 
     </div> 
 
     <div class="table-cell">= </div> 
 
     <div class="table-cell result"></div> 
 
     </div> 
 

 
     <div class="table-row footer"> 
 
     <div class="table-cell">Total</div> 
 
     <div class="table-cell">&nbsp;</div> 
 
     <div class="table-cell">&nbsp;</div> 
 
     <div class="table-cell sum">= $10,000 </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

使用jQuery .keyup()

給所有輸入一個類如class="CalcItem"在我的例子，像這樣

$(".CalcItem").keyup(function(){ 
    var totalCost = 0; 
    totalCost += $("#Item1").val() * 25; 

    // totalCost += all your other values 

    document.getElementById("Total").textContent = "$" + totalCost; 
}) 

Answer 3

<input type="text" class="form-control CalcItem" id="Item1" placeholder="-"> 

觸發事件完全充實的onKeyUp勞埃德的想法後和分叉你的小提琴，我想出了這個：https://jsfiddle.net/eqwert/tospqvx6/

和

其唯一的列的順序依賴，並假定「成本」列的值是前面帶有$

$(function() { 
    $("input").keyup(function() { 
    var cost = parseInt($(this).parent().parent().children().eq(1).text().substring(1)); 
    $(this).parent().parent().children().eq(3).text(cost * $(this).val()); 

    var total = 0; 
    ($(".table-row").not(".footer")).each(function() { 
     let add = parseInt($(this).children().eq(3).text()); 
     total += (add) ? add : 0; 
    }); 

    $(".table-row.footer").children().eq(3).text("= $" + total); 
    }); 
});