js实现简易的购物车

实现页面

html部分

<style>
    table{width: 500px;}
    table,tr,td,th{
        border: 1px solid burlywood; 
        border-collapse: collapse;
        text-align: center;
    }
</style>

<center>
        <table id="mytable">
            <th colspan="6">简易购物车</th>
            <tr>
                <td colspan="2">商品名称</td>
                <td>数量</td>
                <td>单价</td>
                <td>运费</td>
                <td>合计</td>
            </tr>
            <tr>
                <td><input type="checkbox" onclick="addition(2)"></td>
                <td id="name1">《平凡的世界》</td>
                <td>3</td>
                <td>35.6</td>
                <td>9</td>
                <td></td>
            </tr>
            <tr>
                <td><input type="checkbox" onclick="addition(3)"></td>
                <td id="name2">《白鹿原》</td>
                <td>1</td>
                <td>39.2</td>
                <td>5</td>
                <td></td>
            </tr>
            <tr>
                <td><input type="checkbox" onclick="addition(4)"></td>
                <td id="name3">《史记》</td>
                <td>2</td>
                <td>40.8</td>
                <td>4</td>
                <td></td>
            </tr>
            <th colspan="6">
                <input type="checkbox" id="selectAll" onclick="selectAll()">全选
                <button onclick="show()">提交订单</button>
            </th>
        </table>
    </center>

js部分

<script type="text/javascript">
    // .selectAll{
    //     float:left;
    // }
    var sum = 0;//计算总价
    var num = 0;
    var price = 0;
    var fare = 0;
    function show(){
        var string="";//接收输出的内容
        var Array_select = document.getElementsByTagName("input");
        var mytable = document.getElementById( "mytable" );
        // alert(document.getElementById("name1").innerHTML);
        // 获取任意单元格的值
        if(Array_select[0].checked != false || Array_select[1].checked != false || Array_select[2].checked != false){
            if(Array_select[0].checked == true){
                string += "商品名称:" + document.getElementById("name1").innerHTML + ",数量：" + num + ",商品单价：" + price + ",运费：" + fare + "\n";
                sum += parseFloat(mytable.rows[2].cells[5].innerHTML);
            }
            if(Array_select[1].checked == true){
                string += "商品名称:" + document.getElementById("name2").innerHTML + ",数量：" + num + ",商品单价：" + price + ",运费：" + fare + "\n";
                sum += parseFloat(mytable.rows[3].cells[5].innerHTML);
            }
            if(Array_select[2].checked == true){
                string += "商品名称:" + document.getElementById("name3").innerHTML + ",数量：" + num + ",商品单价：" + price + ",运费：" + fare + "\n";
                sum += parseFloat(mytable.rows[4].cells[5].innerHTML);
            }
            confirm("您确定要提交订单？\n" + string + "\n合计：" + sum);
            string = "";
            sum = 0;
        }else{
            alert("您还没有选择商品，无法提交订单！");
        }
    }
    // 计算每个商品的总价，将结果写入单元格
    function addition(i){
        num = mytable.rows[i].cells[2].innerHTML;
        price = mytable.rows[i].cells[3].innerHTML;
        fare = mytable.rows[i].cells[4].innerHTML;
        var sum_row = num * price + parseFloat(fare);
        mytable.rows[i].cells[5].innerHTML = sum_row.toFixed(2);
    }
    function selectAll(){
        var checkbox_all = document.getElementById("selectAll");
        var flag = checkbox_all.checked;
        // alert(checkbox_all.checked);//true
        var Array_select = document.getElementsByTagName("input");
        for(var i=0; i<Array_select.length; i++){
            Array_select[i].checked = flag;
        }
    }
</script>