模拟购物车功能实现页面,求助

Question

• 降价商品 0
• 库存紧张 0

已选商品（不含运费）  0.00 结 算

全选

商品信息

单价

数量

金额

操作

""

全选

删除 清除失效宝贝 移入收藏夹 分享

已选商品 0 件

合计（不含运费）：  0.00

结 算

//这个是js页面的代码














        ![图片说明](https://img-ask.csdn.net/upload/201812/25/1545703444_328325.png)



![图片说明](https://img-ask.csdn.net/upload/201812/25/1545703444_328325.png)

$(function () {

var s=$(".i1").val();
$(document).on(".k").click(function () {
$(this).css("background-color", "#f40");

});
$(document).on(".qx").click(function () {
$(".k").css("background-color", "#f40");
});

$(document).on(".l5").click(function () {
$(".i1").val(5);
});
$(document).on(".15d3").click(function(){
$(this).prev().val(+1);
});
$(document).on(".15d2").click(function(){
$(this).next().val(-1);
if($(this).next().val()==1){
aleft(已经达到最小数量);
$(this).next().val(1);
}

$(this).parent().parent().parent().next().val((this.table_rabate*s));

});
$(".l1").click(function() {
$(this).parent().each(function(){

});

});
$("#yrsc").click(function(){

});

loadshop();
// deletesp();

function loadshop() {

$.ajax({
    "url":"shopShowServlet",
    "type":"POST",
    "dataType":"json",
    "data":{"user_id":"3"},
    "success":function(_data){
        console.log(_data);
        html="";
        html1="";
        //html2+="";
        if(_data.code==200){
            html1+="<li  id='qbsp'class=‘borderHong’><a href='' ><em>全部商品</em><span>&nbsp;</span><span id='quansp'>"+_data.msg.length+"</span></a></li>";
            html+="<div id='shangpin'>";


            $(_data.msg).each(function(){
                html+="<div id='sp1'>";
                html+="<ul style='height:140px;'>";
                html+="<li id='l1'>";
                html+="<div class ='k'></div>";
                html+=" </li>";
                html+=" <li id='l2'>";
                html+="<div id='l2d1'>";
                html+="<div id='l2d2'>"+this.table_img+"</div>";
                html+="<div id='l2d3'";
                html+="<div id='l2d4'>"+this.table_name;"</div>";
                html+=" <div id='l2d5'>";
                html+="<div style='height:25px'></div>";
                html+="<div id='l2d6' style='height:44px;'>";
                html+=" <div class='kk'></div>";
                html+=" <div class='kk'></div>";
                html+=" <div class='kk'></div>";
                html+="</div>";
                html+=" <div></div>";
                html+=" </div>";
                html+=" </div>";
                html+=" </div>";
                html+="</li>";
                html+="<li id='l3'>";
                html+=" <div></div>";
                html+=" </li>";
                html+="<li id='l4'>";
                html+="<div class='l4d'>";
                html+="<div id='l4d2'>"+this.table_price;+"</div>";
                html+="<div id='l4d3' class='1111'>"+this.table_rabate;+"</div>";
                html+="</div>";
                html+=" </li>";
                html+="<li class='l5'>";
                html+="<div class='l4d'>";
                html+="<div id='l5d1'>";
                html+="<td class='tdthree'><span class='jiajie'><input type='button' value='-'><span class='num'>0</span><input type='button' value='+'></span></td>";
                html+="</div>";
                html+="</div>";
                html+="</li>";
                html+="<li id='l6'>";
                html+="<div class='l4d'>";
                html+=" <div style='margin-left:26px;margin-top:22px'>";
                html+="<em id='jine'>"+(this.table_rabate*s)+"</em>";
                html+="</div>";
                html+="</div>";
                html+="</li>";
                html+="<li id='l7'>";
                html+="<div class='l4d'>";
                html+="<div style='margin-left:26px;margin-top:22px'>";
                html+="<a id='yrsc'>移入收藏夹</a><br />";
                html+="<a id='sc'>删除</a>";
                html+="</div>";
                html+=" </div>";
                html+=" </li>";
                html+="</ul>";
                html+="</div>";
                alert($("#table_id").val());
        //SELECT * FROM tbl_collect where user_id=2  and table_id=7

            });

            html+="</div>";


        }else{
            html="购物车空空如也";
        }
        $("#shangpin").empty().append(html);
        $("#qbsp").empty().append(html1);

        var price=0;
        $(".1111").each(function(){
            price+=parseInt($(this).text());

        });


    }

});

};
function deletesp(){
//
$("#sc").click(function(){
//1.判断是否登录
//$.ajax({
//"url":"UserServlet",
//"dataType":"json",
//"type":"POST",
//"data":{"type":5},
//"success":function(_data){
//console.log(_data);
// if(_data.code==400){
// location.href="";
//}else{//已登录
//
var dletesp={"user_id":"3","table_id":$("#table_id").val()};
$.ajax({
"url":"deleteshopServlet",
"dataType":"json",
"type":"POST",
"data":deletesp,
"success":function(box_data){
console.log(box_data);
if(box_data.code==200){
alert("删除成功");
}else{
alert("删除失败");
}
}
});
//}
//}

    //});
    //$("#shop_id").val();
});

}
});

//这个是js的代码

效果大概是这样

求问，怎么实现选中商品id计算金额
根据商品数量计算金额
怎么判断他选中id
前面的js无效，怎么让它后加载
怎么实现删除功能

用ajax实现