将表格 td 乘以输入答案

【问题标题】：Multiply form td by input将表格 td 乘以输入
【发布时间】：2014-08-13 17:44:51
【问题描述】：

我有一个表格，里面有一张桌子。每行4列：

项目名称
商品价格（由我而非用户设置）
数量（由用户输入设置）
总计（价格*数量）

我希望它实时反映总计。

代码片段：

 <tr class="txtMult">
        <td>Salmon</td>
        <td class="val1" type="number">28</td>
        <td><input name="Fish1" class="val2" size="2px"/></td>
        <td><span class="multTotal">0.00</span></td>
    </tr>

 $(document).ready(function () {
       $(".txtMult input").keyup(multInputs);

       function multInputs() {
           var mult = 0;
           // for each row:
           $("tr.txtMult").each(function () {
               // get the values from this row:
               var $val1 = $('.val1', this).val();
               var $val2 = $('.val2', this).val();
               var $total = ($val1 * 1) * ($val2 * 1)
               $('.multTotal',this).text($total);
               mult += $total;
           });
           $("#grandTotal").text(mult);
       }
  });

问题：继续获得 0。（或 NaN）。根据我对 Jquery 的了解，问题在于我将 val1 视为用户输入而不是硬编码。我该如何解决？是这个问题吗？

TIA

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您不能在td 上使用.val，因此您需要获取元素的.text()，并将其解析为整数（可选，但这是个好主意）：

var $val1 = parseInt($('.val1', this).text())

http://jsfiddle.net/uyyzkLny/2/

【讨论】：

太棒了。谢谢你。我会接受答案:)（从现在起 5 分钟）

【解决方案2】：

这是一个能让你开始的小提琴——只是一种不同的方法——FIDDLE。

关键点：

使用 HTML 限制器将数字保持在 0 到 10 之间的整数

'$' 被剥离以进行计算，然后放回总计。

$('input[type=number]').change( function(){
    $('.mytable tr td:nth-child(2)').each( function(index, element){
             var price = $(this).text().slice(1);
             var number = $(this).closest('td').next('td').find('input').val();
             var total = (price * number).toFixed(2);
             $(this).closest('td').next('td').next('td').text('$' + total );
             console.log(price + ' *** ' + number + ' *** ' + total);

    });
});

【讨论】：

【解决方案3】：

使用

$('.val1', this).text()

而不是

$('.val1', this).val();

更新小提琴here

【讨论】：