2018-03-05 購(gòu)物車

<!DOCTYPE html>
    <html>
    <head>
        <title>購(gòu)物車</title>
        <meta charset="utf-8" />
        <style type="text/css">
            h1 {
                text-align:center;
            }
            table {
                margin:0 auto;
                width:60%;
                border:2px solid #aaa;
                border-collapse:collapse;
            }
            table th, table td {
                border:2px solid #aaa;
                padding:5px;
            }
            th {
                background-color:#eee;
            }
        </style>

        <script>
            function del(btn) {
                btn.parentNode.parentNode.remove();
                map.delete(btn.parentNode.parentNode.cells[0].innerHTML);
                sum();
            }

            function increase(btn) {
                var input = btn.previousElementSibling;
                var count = parseInt(input.value);
                count++;
                input.value = count;

                //重新計(jì)算金額
                var td = btn.parentNode.previousElementSibling;
                var single_price = parseInt(td.innerHTML);

                var price = single_price*count;
                btn.parentNode.nextElementSibling.innerHTML = price;
                sum();
            }
            function decrease(btn) {
                var input = btn.nextElementSibling;
                var count = parseInt(input.value);
                if(count <= 1)
                {
                    count = 1;
                }
                else{
                    count--;
                }

                input.value = count;

                //重新計(jì)算金額
                var td = btn.parentNode.previousElementSibling;
                var single_price = parseInt(td.innerHTML);

                var price = single_price*count;
                btn.parentNode.nextElementSibling.innerHTML = price;
                sum();
            }

            var map = new Map();

            function add_shoppingcart(btn) {

                var tbody = document.getElementById('goods');

//            alert(btn.parentNode.parentNode.cells[0].innerHTML);
//            alert(btn.parentNode.parentNode.children[0].innerHTML);

                var goods_name = btn.parentNode.parentNode.cells[0].innerHTML;


                if(map.has(goods_name))
                {
                    var tr = map.get(goods_name);
                    increase(tr.cells[2].lastElementChild);
                }
                else
                {
                    var goods_price = btn.parentNode.parentNode.cells[1].innerHTML;

                    //生成一行tr
                    var tr = document.createElement('tr');
                    var html = `<td>${goods_name}</td>
      <td>${goods_price}</td>
      <td align="center">
        <input type="button" value="-" onclick="decrease(this)"/>
        <input type="text" size="3" readonly value="1"/>
        <input type="button" value="+" onclick="increase(this)"/>
      </td>
      <td>${goods_price}</td>
      <td align="center">
          <input type="button" value="x" onclick="del(this)"/>
      </td>`;

                    tr.innerHTML = html;
                    tbody.appendChild(tr);

//                map.put(key,value);
                    map.set(goods_name, tr);
                }

                sum();
            }


            function sum() {
                var tbody = document.getElementById('goods');
                var total = 0;
                for(var i = 0; i < tbody.children.length;i++)
                {
                    var price = parseInt(tbody.children[i].cells[3].innerHTML);
                    total += price;
                }
                document.getElementById('total').innerHTML = total;
            }
        </script>
    </head>
<body>
<h1>真劃算</h1>
<table>
    <tr>
        <th>商品</th>
        <th>單價(jià)(元)</th>
        <th>顏色</th>
        <th>庫存</th>
        <th>好評(píng)率</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>羅技M185鼠標(biāo)</td>
        <td>80</td>
        <td>黑色</td>
        <td>893</td>
        <td>98%</td>
        <td align="center">
            <input type="button" value="加入購(gòu)物車" onclick="add_shoppingcart(this)"/>
        </td>
    </tr>
    <tr>
        <td>微軟X470鍵盤</td>
        <td>150</td>
        <td>黑色</td>
        <td>9028</td>
        <td>96%</td>
        <td align="center">
            <input type="button" value="加入購(gòu)物車" onclick="add_shoppingcart(this);"/>
        </td>
    </tr>
    <tr>
        <td>洛克iphone6手機(jī)殼</td>
        <td>60</td>
        <td>透明</td>
        <td>672</td>
        <td>99%</td>
        <td align="center">
            <input type="button" value="加入購(gòu)物車" onclick="add_shoppingcart(this);"/>
        </td>
    </tr>
    <tr>
        <td>藍(lán)牙耳機(jī)</td>
        <td>100</td>
        <td>藍(lán)色</td>
        <td>8937</td>
        <td>95%</td>
        <td align="center">
            <input type="button" value="加入購(gòu)物車" onclick="add_shoppingcart(this);"/>
        </td>
    </tr>
    <tr>
        <td>金士頓U盤</td>
        <td>70</td>
        <td>紅色</td>
        <td>482</td>
        <td>100%</td>
        <td align="center">
            <input type="button" value="加入購(gòu)物車" onclick="add_shoppingcart(this);"/>
        </td>
    </tr>
</table>
<h1>購(gòu)物車</h1>
<table>
    <thead>
    <tr>
        <th>商品</th>
        <th>單價(jià)(元)</th>
        <th>數(shù)量</th>
        <th>金額(元)</th>
        <th>刪除</th>
    </tr>
    </thead>
    <tbody id="goods">
    <!--<tr>-->
    <!--<td>羅技M185鼠標(biāo)</td>-->
    <!--<td>80</td>-->
    <!--<td align="center">-->
    <!--<input type="button" value="-" onclick="decrease(this)"/>-->
    <!--<input type="text" size="3" readonly value="1"/>-->
    <!--<input type="button" value="+" onclick="increase(this)"/>-->
    <!--</td>-->
    <!--<td>80</td>-->
    <!--<td align="center">-->
    <!--<input type="button" value="x" onclick="del(this)"/>-->
    <!--</td>-->
    <!--</tr>-->
    </tbody>
    <tfoot>
    <tr>
        <td colspan="3" align="right">總計(jì)</td>
        <td id="total"></td>
        <td></td>
    </tr>
    </tfoot>
</table>
</body>
</html>

最后編輯于：2018.03.05 16:31:31

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末叙谨，一起剝皮案震驚了整個(gè)濱河市符喝，隨后出現(xiàn)的幾起案子岂津，更是在濱河造成了極大的恐慌黍瞧，老刑警劉巖辟犀，帶你破解...
沈念sama閱讀 206,214評(píng)論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異检激，居然都是意外死亡连茧，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,307評(píng)論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門谒拴，熙熙樓的掌柜王于貴愁眉苦臉地迎上來尝江，“玉大人，你說我怎么就攤上這事英上√啃颍” “怎么了？”我有些...
開封第一講書人閱讀 152,543評(píng)論 0贊 341
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵苍日，是天一觀的道長(zhǎng)惭聂。經(jīng)常有香客問我，道長(zhǎng)相恃，這世上最難降的妖魔是什么辜纲？我笑而不...
開封第一講書人閱讀 55,221評(píng)論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮拦耐，結(jié)果婚禮上耕腾，老公的妹妹穿的比我還像新娘。我一直安慰自己杀糯，他們只是感情好扫俺，可當(dāng)我...
茶點(diǎn)故事閱讀 64,224評(píng)論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著固翰，像睡著了一般狼纬。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上倦挂，一...
開封第一講書人閱讀 49,007評(píng)論 1贊 284
城市分裂傳說
那天畸颅，我揣著相機(jī)與錄音担巩，去河邊找鬼方援。笑死，一個(gè)胖子當(dāng)著我的面吹牛涛癌，可吹牛的內(nèi)容都是我干的犯戏。我是一名探鬼主播送火，決...
沈念sama閱讀 38,313評(píng)論 3贊 399
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼先匪！你這毒婦竟也來了种吸？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 36,956評(píng)論 0贊 259
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤呀非，失蹤者是張志新（化名）和其女友劉穎坚俗，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體岸裙，經(jīng)...
沈念sama閱讀 43,441評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡猖败，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 35,925評(píng)論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了降允。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片恩闻。...
茶點(diǎn)故事閱讀 38,018評(píng)論 1贊 333
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖剧董，靈堂內(nèi)的尸體忽然破棺而出幢尚，到底是詐尸還是另有隱情，我是刑警寧澤翅楼，帶...
沈念sama閱讀 33,685評(píng)論 4贊 322
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布尉剩，位于F島的核電站，受9級(jí)特大地震影響犁嗅，放射性物質(zhì)發(fā)生泄漏边涕。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,234評(píng)論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一褂微、第九天我趴在偏房一處隱蔽的房頂上張望功蜓。院中可真熱鬧，春花似錦宠蚂、人聲如沸式撼。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,240評(píng)論 0贊 19
一樁弒父案求厕，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽著隆。三九已至，卻和暖如春呀癣，著一層夾襖步出監(jiān)牢的瞬間美浦，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 31,464評(píng)論 1贊 261
情欲美人皮
我被黑心中介騙來泰國(guó)打工项栏，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留浦辨，地道東北人。一個(gè)月前我還...
沈念sama閱讀 45,467評(píng)論 2贊 352
代替公主和親
正文我出身青樓沼沈，卻偏偏與公主長(zhǎng)得像流酬，于是被迫代替她去往敵國(guó)和親币厕。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,762評(píng)論 2贊 345

2018-03-05 購(gòu)物車

推薦閱讀更多精彩內(nèi)容