使用jquery计算动态字段

时间:2013-06-07 15:03:13

标签: jquery forms

我正在'尝试'建立一个发票模板,并希望自动填充行总计,子总计,增值税和总输入。到目前为止我所尝试的一切似乎都没有产生任何结果,所以我想我会转向我最好的教学资源来尝试解决问题。

以下是我试图填写的页面代码部分

<table class="appendo" width="100%" border="0" name="item" id="item">
    <tr>
      <td><input type="text" name="description[]" class="input3" tabindex="11"/></td>
      <td width="100"><input type="text" name="quantity[]" class="qtys" tabindex="12"/></td>
      <td width="100"><input type="text" name="cost[]" class="costs" tabindex="13"/></td>
      <td width="100"><input type="text" name="tot[]" class="tots" tabindex="14"/></td>
    </tr>
    </table>
    <input type="button" name="update" value="Update Totals" />
    <table width="200" border="0" name="totals" id="totals">
    <tr>
     <td width="100">Sub Total</td>
      <td width="100"><input name="sub" type="text" class="sub" tabindex="15" readonly="readonly"/></td>
      </tr>
      <tr>      
      <td width="100">VAT</td>
       <td width="100"><input name="vat" type="text" class="vat" tabindex="16" readonly="readonly"/></td> 
       </tr>
       <tr>   
      <td width="100">TOTAL</td>
      <td width="100"><input name="total" type="text" class="gtotal" tabindex="17" readonly="readonly"/></td>        
    </tr>
    </table>

这是我到目前为止拼凑的剧本

 $sumDisplay = $('input#total');

    var $sub = 0;
    var $vat = 0;
    var $total = 0;

    function compute() 
    {
    $('#item tr').each(function() {
                    //get line totals
    $sum = 0;   
    $sum = (
            parseFloat($(this).find('.qtys').val())*
            parseFloat($(this).find('.costs').val())
        );
    $(this).find('.tots').val=$sum;
                   //get sub total    
    var value = Number($(this).find('.tots').val())
             $sub += value; );
                   //Get VAT
    $vat = $sub*1.2;
    }
                  //Write Values
    $(this).find('.sub').val=$sub;
    $(this).find('.vat').val=$vat;
    });

如果你想看到它不起作用我在fiddle上有它。

我希望你们能提供帮助。

1 个答案:

答案 0 :(得分:1)

正如我在快速评论中所说,您发布的代码的主要问题是没有任何内容调用compute,但是让我们认为这是一种疏忽,而您在标记中明显拥有的按钮应该是称这种方法。

下一个问题是所有的行看起来像:

$(this).find('.tots').val=$sum;

val()是一种方法,因此该行应该是

$(this).find('.tots').val($sum);

下一个问题是最后两行

$(this).find('.sub').val=$sub;
$(this).find('.vat').val=$vat;

这两个字段不在您要循环的#item tr范围内。所以你永远不会.find他们。它们也遭受与上述相同的问题。相反,这些行可能是

$('.sub').val($sub);
$('.vat').val($vat);

还有其他一些代码清理,错误位置的大括号等需要但我最终让你的代码工作。这是工作:http://jsfiddle.net/Fg5Ly/5/