jsはシンプルなショッピングカートモジュールを実装します

<本文>
      <div id="head" align="center">
        <フォーム>
          <span class="font1">名前:</span><input type="text" id="name">
          <span class="font1">単価:</span><input type="text" id="price">
          <input id="add1" type="button" value="追加">
          <input id="pay1" type="button" value="チェックアウト">
          <input id="set1" type="reset" value="リセット">
        </フォーム>
      </div>
      <div>
        <表の境界線="1" id="t">
          <頭>
          <tr align="center">
            <td><input type="checkbox" style='カーソル: ポインタ'></td>
            <td>製品名</td>
            <td>価格</td>
            <td>数量</td>
            <td>操作</td>
          </tr>
          </thead>
          <t本文>

          </tbody>
        </テーブル>
      </div>
      <div align="right" id="b">
        <span>合計金額:</span>
        <span id="合計" style="color: red">0</span>&nbsp;
        <span>商品の数量:</span>
        <span id="TotalNum" style="color: red">0</span>
      </div>
</本文>

 <スタイル>
        体{
          背景色: コーラル;
        }
        ＃頭{
          マージン:30px 自動 10px 自動;
        }
        #名前、#価格{
          背景色: アクアマリン;
        }
        #追加1、#支払い1、#設定1{
          色: 赤;
          フォントの太さ: 太字;
          背景色: ゴールド;
          カーソル: ポインタ;
        }
        .font1{
          フォントの太さ: 太字;
          フォントサイズ: 大きい;
        }

        #t、#b{
          境界線の折りたたみ: 折りたたみ;
          マージン: 30px 自動;
          幅: 600ピクセル;
        }
        #t スレッド{
          境界線: 3px 金色;
          色: 白;
          背景色: 青;
        }
        #t tボディ{
          色: #1414bf;
          背景色: 白;
        }
</スタイル>

<script src="../lib/jquery-3.3.1.js"></script>
  <スクリプト>
    //ボタン関数を初期化する initButton(){
      $("input[name=j1]").off();
      $("入力[名前=x1]").off();
      //数量ボタンを追加 $("input[name=j1]").on("click", function (){
             var num = parseInt($(this).prev().val());
        （数値＞１）の場合{
          $(this).prev().prev().attr("無効",false);
        }
        （数値＞9）の場合{
          $(this).attr("無効","無効");
          戻る;
        }
             数値++;
             （数値＞１）の場合{
               $(this).prev().prev().attr("無効",false);
             }
             （数値＞9）の場合{
               $(this).attr("無効","無効");
             }
             $(this).prev().val(num);
        $("#合計").text(cal());
        $("#TotalNum").text(calNum());
           }
      ）
      //数量を減らすボタン$($("input[name=x1]")).click(function (){
        var num = parseInt($(this).next().val());
        （数値1 < 10）の場合{
          $("#add1").prop("無効",false);
        }
        数値--;
        （数値<10）の場合{
          $(this).next().next().prop("無効",false);
        }
        （数値 == 1）の場合{
          $(this).prop("無効","無効");
        }
        $(this).next().val(num);
        $("#合計").text(cal());
        $("#TotalNum").text(calNum());
      });
    }
// 削除関数を初期化する initdelete(){
      $(".delete").on("click",function(){
        $(this).parent().parent().remove();
        $("#合計").text(cal());
        $("#TotalNum").text(calNum());
      });
    }
//すべて選択または選択解除する function$("thead input[type=checkbox]").on("click",function (){
     $("tbody input[type=checkbox]").each(function (index,element){
       $(this).prop("checked",$("ヘッド入力[type=checkbox]").prop("checked"));
       $("#合計").text(cal());
       $("#TotalNum").text(calNum());
     });
   })

    // 各チェックボックスを初期化する function initCheckBox(){
      $("tbody入力[type=チェックボックス]").off();
      $("tbody input[type=checkbox]").on("change",function (){
        $("#合計").text(cal());
        $("#TotalNum").text(calNum());
      });
    }
    //合計金額を計算する function cal(){
      var 価格 = null;
      $("tbody input[type=checkbox]:checked").each(function (){
        var priceByOne = parseFloat($(this).parent().next().next().text());
        var num = parseFloat($(this).parent().next().next().find("input[name='num']").val());
        var totalMoneyByone = priceByOne * num;
        価格+= totalMoneyByone;
      });
      返品価格;
    }
    //合計数を計算する function calNum(){
      var 合計数 = null;
      $("tbody input[type=checkbox]:checked").each(function (){
        var num = parseInt($(this).parent().next().next().find("input[name='num']").val());
        合計数+=数値;
      });
      totalNum を返します。
    }


    //決済$("#pay1").on("click",function (){

      alert("総消費量: "+cal());
      $("ヘッド入力[type=チェックボックス]:checked").prop("checked",false);
      $("tbody input[type=checkbox]:checked").parent().parent().remove();


    });

    //$("#add1").on("click",function (){ を追加
      var name = $("#name").val();
      var 価格 = $("#price").val();
      var priceZ = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/
      if ((name == "" || price == "") || (!priceZ.test(price)) ){
        alert("入力エラー!");
      }それ以外 {
        var GameArr = [];
        var フラグ = false;
        var repeat = null;
        //名前配列を取得する $("tbody").each(function (){
            var finds = $(this).find(".goodsName");
            (i = 0 とします; i < finds.length; i++) {
              GameArr.push(finds.eq(i).text());
          }
        });
        (i = 0 とします; i < GameArr.length; i++) {
          (名前 == GameArr[i])の場合{
            繰り返し = i;
            フラグ = true;
            壊す;
          }}
        //同じ名前がある場合は数量と価格を変更します if (flag == true){
          var totalNum = parseInt($("tbody:eq(" + repeat + ")").find("input[name='num']").val())+1;
          合計数 > 9 の場合{
            $(this).attr("無効","無効");
          }
          $("tbody:eq(" + repeat + ")").find("input[name='num']").val(totalNum);
          $("tbody:eq(" + repeat + ")").find(".goodsPrice").text(価​​格);
          //それ以外の場合はテーブルを連結します}else {
        var goods = "<tr>"+
             "<td><input type='checkbox' style='cursor: ポインター'></td>"+
             "<td class='goodsName'>"+名前+"</td>"+
             "<td class='goodsPrice'>"+価格+"</td>"+
             "<td>"+
             "<input type='button' value='-' name='x1' style='cursor: pointer'>&nbsp;"+
             "<入力タイプ='テキスト' 値='1' 名前='数値'>&nbsp;"+
             "<入力タイプ='ボタン' 値='+' 名前='j1' スタイル='カーソル: ポインター'>"
             +"</td>"+
             '<td><a href="" class=" rel="external nofollow" delete" style="color:red">削除</a></td>' +
             「</tr>」
        $("tbody").append(商品);
        // 毎回追加した後、イベント initButton() をバインドします。
        初期化削除();
        チェックボックスを初期化します。
      }}
    });
</スクリプト>