如何自定义jAutoCalc插件

时间:2018-07-03 15:48:16

标签: javascript php html jquery-calculation

我有一个关于jAutoCalc的简单问题,可以通过两种方式回答我的问题:

1>如何自定义jAutoCalc插件,以便我们使其能够用于输入数组名称,而不仅仅是名称。 我的代码在这里:

<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="http://rawgit.com/c17r/jAutoCalc/master/jAutoCalc.js"></script>
  <script type="text/javascript">
    <!--
    $(document).ready(function() {
      function autoCalcSetup() {
        $('form[name=cart]').jAutoCalc('destroy');
        $('form[name=cart] tr[name=line_items]').jAutoCalc({
          keyEventsFire: true,
          decimalPlaces: 2,
          emptyAsZero: true
        });
        $('form[name=cart]').jAutoCalc({
          decimalPlaces: 2
        });
      }
      autoCalcSetup();

      $('button[name=remove]').click(function(e) {
        e.preventDefault();

        var form = $(this).parents('form')
        $(this).parents('tr').remove();
        autoCalcSetup();
      });

      $('button[name=add]').click(function(e) {
        e.preventDefault();

        var $table = $(this).parents('table');
        var $top = $table.find('tr[name=line_items]').first();
        var $new = $top.clone(true);

        $new.jAutoCalc('destroy');
        $new.insertBefore($top);
        $new.find('input[type=text]').val('');
        autoCalcSetup();
      });
    });
  </script>
</head>
<body>
  <form name="cart">
    <table name="cart">
      <tr>
        <th></th>
        <th>Item</th>
        <th>Qty</th>
        <th>Price</th>
        <th>&nbsp;</th>
        <th>Item Total</th>
      </tr>
      <tr name="line_items">
        <td><button name="remove">Remove</button></td>
        <td>Stuff</td>
        <td><input type="text" name="qty" value="1"></td>
        <td><input type="text" name="price" value="9.99"></td>
        <td>&nbsp;</td>
        <td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
      </tr>
      <tr name="line_items">
        <td><button name="remove">Remove</button></td>
        <td>More Stuff</td>
        <td><input type="text" name="qty" value="2"></td>
        <td><input type="text" name="price" value="12.50"></td>
        <td>&nbsp;</td>
        <td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
      </tr>
      <tr name="line_items">
        <td><button name="remove">Remove</button></td>
        <td>And More Stuff</td>
        <td><input type="text" name="qty" value="3"></td>
        <td><input type="text" name="price" value="99.99"></td>
        <td>&nbsp;</td>
        <td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
      </tr>
      <tr>
        <td colspan="3">&nbsp;</td>
        <td>Subtotal</td>
        <td>&nbsp;</td>
        <td><input type="text" name="sub_total" value="" jAutoCalc="SUM({item_total})"></td>
      </tr>
      <tr>
        <td colspan="3">&nbsp;</td>
        <td>
          Tax:
          <select name="tax">
            <option value=".06">CT Tax</option>
            <option selected value=".00">Tax Free</option>
          </select>
        </td>
        <td>&nbsp;</td>
        <td><input type="text" name="tax_total" value="" jAutoCalc="{sub_total} * {tax}"></td>
      </tr>
      <tr>
        <td colspan="3">&nbsp;</td>
        <td>Total</td>
        <td>&nbsp;</td>
        <td><input type="text" name="grand_total" value="" jAutoCalc="{sub_total} + {tax_total}"></td>
      </tr>
      <tr>
        <td colspan="99"><button name="add">Add Row</button></td>
      </tr>
    </table>
  </form>
</body>
</html>

因为动态生成的输入的名称相同,所以我想使用输入数组。问题是,如果我这样做,那么我将无法使用插件功能!

2>通过提供在使用输入数组时使用插件的方法,可以以第二种方式回答问题

2 个答案:

答案 0 :(得分:0)

我认为整个问题都与javascript有关 javascript应该像

$(document).ready(function(){
    $('.item_total').keyup(function(){
        $('your result input name here).text($('.item_total').val() * 1.5);
    });   
});

此链接将帮助您: http://jsfiddle.net/7BDwP/

您将从上面的链接中了解我要说的话

答案 1 :(得分:0)

我知道它的帖子很旧,但也许其他人也有同样的问题。

尝试打开jautocalc.js,找到此函数“ getFieldSelector(field)”并编辑此代码。

返回':input [name =“'+字段+'”]';

返回':input [name =“'+ field +'[]”]';