Question

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

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

我希望它能反映总人数。

的jsfiddle： http://jsfiddle.net/uyyzkLny/

代码段：

 <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

Answer 1

您无法在.val上使用td，因此您需要获取元素的.text()，并将其解析为整数（可选，但不错）：

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

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

Answer 2

这是一个小提琴，可以给你一个开始 - 只是一个不同的方法 - FIDDLE。

关键点：

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

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

JS

$('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);

    });
});

Answer 3

使用

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

而不是

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

更新了小提琴here

通过输入相乘td

3 个答案: