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

消費税の自動計算（複数行対応）で検索をしても出てこなかったため、書きます。
消費税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>

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

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