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); 
    }); 
});