1

jAutoCalcに関する簡単な質問があります。私の質問には次の 2 つの方法で答えることができます。

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番目の方法で質問に答えることができます

4

2 に答える 2

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/

上記のリンクから、私が言おうとしていることがわかります

于 2018-07-03T16:52:34.843 に答える