jQueryはショッピングカート機能を実装します

この記事の例では、ショッピングカート機能を実装するためのjQueryの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

html

<!DOCTYPE html>
<html>
<ヘッド>
<title>ショッピングカート</title>
<メタ文字セット="utf-8" />
<スタイル タイプ="text/css">
h1 {
    テキスト配置: 中央;
}
 
テーブル {
    マージン: 0 自動;
    幅: 60%;
    境界線: 2px 実線 #aaa;
    境界線の折りたたみ: 折りたたみ;
}
 
テーブル th、テーブル td {
    境界線: 2px 実線 #aaa;
    パディング: 5px;
}
 
番目 {
    背景色: #eee;
}
</スタイル>
<script src="jquery-3.2.1.min.js"></script>
<script src="gw.js"></script>
</head>
<本文>
    <h1>お買い得だ</h1>
    <テーブルid="tb1">
        <tr>
            <th>製品</th>
            <th>単価（元）</th>
            <th>色</th>
            <th>在庫</th>
            <th>陽性率</th>
            <th>オペレーション</th>
        </tr>
        <tr>
            <td>ロジクール M185 マウス</td>
            <td>80</td>
            <td>黒</td>
            <td>893</td>
            <td>98%</td>
            <td align="center"><input type="button" value="カートに追加"
                onclick="addshoping(this);" /></td>
        </tr>
        <tr>
            <td>Microsoft X470 キーボード</td>
            <td>150</td>
            <td>黒</td>
            <td>9028</td>
            <td>96%</td>
            <td align="center"><input type="button" value="カートに追加"
                onclick="addshoping(this);" /></td>
        </tr>
        <tr>
            <td>ロック iPhone 6 ケース</td>
            <td>60</td>
            <td>透明</td>
            <td>672</td>
            <td>99%</td>
            <td align="center"><input type="button" value="カートに追加"
                onclick="addshoping(this);" /></td>
        </tr>
        <tr>
            <td>Bluetooth ヘッドセット</td>
            <td>100</td>
            <td>青</td>
            <td>8937</td>
            <td>95%</td>
            <td align="center"><input type="button" value="カートに追加"
                onclick="addshoping(this);" /></td>
        </tr>
        <tr>
            <td>キングストン USB フラッシュドライブ</td>
            <td>70</td>
            <td>赤</td>
            <td>482</td>
            <td>100%</td>
            <td align="center"><input type="button" value="カートに追加"
                onclick="addshoping(this);" /></td>
        </tr>
    </テーブル>
 
    <h1>ショッピングカート</h1>
    <テーブル>
        <頭>
            <tr>
                <th>製品</th>
                <th>単価（元）</th>
                <th>数量</th>
                <th>金額（元）</th>
                <th>削除</th>
            </tr>
        </thead>
        <tbody id="商品">
 
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3" align="right">合計</td>
                <td id="合計"></td>
                <td></td>
            </tr>
        </tfoot>
    </テーブル>
 
</本文>
</html>

//ショッピングカートを追加する function addshoping(btn) {
 
        var name = $(btn).parent().siblings().eq(0).html()
        var price = $(btn).parent().siblings().eq(1).html()
 
         var trs = $("#商品tr")
         var nameArr = 新しい配列();
         $.each(trs, 関数(インデックス, 値) {
             nameArr.push($(this).children('td').eq(0).text())
         })
        var $tr = $('<tr>' +
            '<td>' + 名前 + '</td>' +
            '<td>' + 価格 + '</td>' +
            '<td align="center">' +
            '<input type="button" value="-" onclick="jian(this);"/> ' +
            '<input type="number" size="3" readonly value="1"/> ' +
            '<input type="button" value="+" onclick="increase(this);"/>' +
            '</td>' +
            '<td>' + 価格 + '</td>' +
            '<td align="center"><input type="button" value="x" onclick="del(this);"/></td>' +
            '</tr>');
        var ishasName = nameArr.indexOf(名前)
        
        ishasName >= 0 の場合
            var goodcount = trs.eq(ishasName).children('td').eq(2).children().eq(1).val()
            数値.parseInt(goodcount);
            trs.eq(ishasName).children('td').eq(2).children().eq(1).val(++goodcount)
            var price=trs.eq(ishasName).children('td').eq(1).html()
             Number.parseInt(価格)
             trs.eq(ishasName).children('td').eq(3).html(goodcount*price);
            
                
        } それ以外 {
 
           // $tr.insertAfter($("#goods tr:eq(0)"))
            $("#goods").append($tr);
         }
            var kucun = tds.eq(3).html()
   数値.parseInt(kucun)
   tds.eq(3).html(--kucun)
 
        和（）
    }
    //増加関数 increase(btn){
        var num=$(btn).prev().val()
        数値.parseInt(num);
        var bignew=$(btn).prev().val(++num)
        var price = $(btn).parent().prev().html();
        $(btn).parent().next().html(数値*価格);
        和（）;
    
    };
    //関数 jian(btn){ を減らす
        
        var num = $(btn).next().val()
        if(数値<=1){
            戻る;
        }
        数値.parseInt(--num)
        var price = $(btn).parent().prev().html();
        var newprice=$(btn).parent().next().html();
        
        $(btn).parent().next().html(新しい価格-価格);
        $(btn).next().val(数値)
      
    和（）
    }
    //削除関数del(btn){
       $(btn).親().親().削除()
       和（）;
    }
    //合計関数 sum() {
// tbody の下のすべての行を取得します var $trs = $("#goods tr");
// ループします var sum = 0;
(var i = 0; i < $trs.length; i++) の場合 {
    // 各行を取得します var $tr = $trs.eq(i);
    // 行の4列目の値（金額）を取得します
    var mny = $tr.children().eq(3).html();
    合計 += parseFloat(mny);
}
// total$("#total").html(sum) に書き込みます。
};

実行結果: