More than 3 years have passed since last update.

【コピペOK】jQuery 消費税の自動計算【複数行対応】

Last updated at 2020-08-31Posted at 2020-08-31

消費税の自動計算（複数行対応）で検索をしても出てこなかったため、書きます。
消費税10％対応です。

・数値入力後ボタンの押下、不要。＊タブキーで移動する必要あり。
・id指定でではなくclass指定のため、各行専用にコードを書く必要なし。

CodePenで動作確認してから、ご検討願います。（＊半角数字対応）

See the Pen 消費税の自動計算 by aiterasaki (@aiterasaki) on CodePen.

何方かのお役に立てれば幸いです

消費税の自動計算.html


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>消費税の自動計算</title>

  <!-- 【CDN参照URL：https://getbootstrap.jp/docs/4.3/getting-started/introduction/】 -->

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  <script>

  //税込を入力、税抜は自動計算
  //＜body＞要素をon()を使ってchange()発動
  $(function(){
    $('body').on('change', '.taxExcluded', function() {
      $(this).parent().parent().find('.automaticCalculation').text(Math.round(parseInt($(this).val()) * 110 / 100));
    });
  });

  </script>
</head>
<body>
  <form>
    <table class="table table-bordered table-dark">
      <thead>
        <tr>
          <th scope="col"></th>
          <th scope="col">料金(税抜)</th>
          <th scope="col">料金(税込)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td class="">
            <input type="text" class="form-control taxExcluded" name="" placeholder="料金(税込)を入力してください">
          </td>
          <td><span class="automaticCalculation"></span></td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td class="">
            <input type="text" class="form-control taxExcluded" name="" placeholder="料金(税込)を入力してください">
          </td>
          <td><span class="automaticCalculation"></span></td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td class="">
            <input type="text" class="form-control taxExcluded" name="" placeholder="料金(税込)を入力してください">
          </td>
          <td><span class="automaticCalculation"></span></td>
        </tr>
      </tbody>
    </table>
  </form>
</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【コピペOK】jQuery 消費税の自動計算 【複数行対応】

【コピペOK】jQuery 消費税の自動計算【複数行対応】