jquery的表格增删查+数量增加+总价


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
<title></title>
<style>
.tr1{
background: red;
}
.tr2{
background: #90EE90;
}
</style>
<script>


var index = 1;
var upindex ;
var uptr ;
var allPrice = 0;
var oldPrice;
$(document).ready(function(){

$("#btn1").click(function(){
var _tr;//定义添加的行的开始标签  中间添加class样式
//设置隔行的颜色
if(index%2 == 0){
_tr = "<tr class='tr1'>";
}else{
_tr = "<tr class='tr2'>";
}
var nameV = $("#id1").val();//得到名字
var priceV = $("#id2").val();//得到价钱
var countV = $("#id3").val();//得到数量
//拼装完整的行
var newTr = _tr + "<td align='center'>"+index+"</td>"
+"<td align='center'>"+nameV+"</td>"
+"<td id='price"+index+"' align='center'>"+priceV+"</td>"
+"<td align='center'><input type='button' id='jian"+index+"' value='-'/>&nbsp;"
+"<span>"+countV+"</span>"
+"&nbsp;<input type='button' id='add"+index+"' value='+'/></td>"
+"<td align='center' >"+countV*priceV+"</td>"
+"<td align='center'><input type='button' id='sc"+index+"' value='删除'/>";
//把行添加到table中
$("#mytable").append(newTr);

$("#sc"+index).click(function(){
$(this).parent().parent().remove();//input的parent是td,再parent是tr,然后通过remove删除自己
//修改总价

});
$("#jian"+index).click(function(){
var sl = $(this).next();//得到减号后面的数量
var newNum = parseInt(sl.text())-1;//数量 -1
sl.text(newNum);//修改view
//修改小计
var price = $(this).parent().prev().text();//得到单价  $(this).parent()当前列td
var xjTd = $(this).parent().next();//得到 小计 td
xjTd.text(parseInt(xjTd.text())-parseInt(price));//旧小计 - 单价,得到新小计,显示在view上
//修改总计
$("#zj").text(parseInt($("#zj").text()) - parseInt(price));//旧总价 - 单价,得到新总价,显示在view上 

});
$("#add"+index).click(function(){
var sl = $(this).prev();//得到+号前面的数量
var newNum = parseInt(sl.text())+1;//数量 +1
sl.text(newNum);
//修改小计
var price = $(this).parent().prev().text();//得到单价
var xjTd = $(this).parent().next();//得到 小计 td
xjTd.text(parseInt(xjTd.text())+parseInt(price));//旧小计  + 单价,得到新小计,显示在view上
//修改总计
$("#zj").text(parseInt($("#zj").text()) + parseInt(price));//旧总价 + 单价,得到新总价,显示在view上 

});
$("#price"+index).dblclick(function(){//双击事件  把价钱td中的价钱文本 替换为 输入框,同时显示旧价钱
oldPrice = $(this).text();//保存旧单价 到 全局变量 oldprice中,修改总计时使用

$(this).html("<input type='text' id='input"+index+"' value='"+oldPrice+"'/>");//把价钱td中的价钱文本 替换为 输入框,同时显示旧价钱
$("#input"+index).blur(function(){//价钱输入框 添加失去焦点事件  ,通过id找到价钱输入框
var newPrice = $(this).val();//得到新价钱
var parentTd = $(this).parent();//得到价钱td(input的父亲)
parentTd.html(newPrice);//把新价钱显示在view上,替换掉输入框
//修改小计
var sl = parentTd.next().children()[1].innerText;//next表示价钱输入框的下一个td,children()[1]表示第二个儿子::数量
parentTd.next().next().text(newPrice*sl);//计算新小计,显示在 小计  td中
// debugger;
//修改总价
$("#zj").text($("#zj").text()-oldPrice*sl+newPrice*sl);//旧的总价 先-此商品旧的小计,再+新的小计

});
});
index++;
//把新的商品的总价钱添加到 所有的总价钱中
$("#zj").text(parseInt($("#zj").text()) + countV*priceV);
});

$("#topck").click(function(){

$("input[type='checkbox']").attr("checked",this.checked);
});
});

</script>
</head>
<body>
<center>

<table >
<tr><td>姓名</td><td><input type="text" id="id1"></td></tr>
<tr><td>价格</td><td><input type="number" id="id2"></td></tr>
<tr><td>数量</td><td><input type="number" id="id3"></td></tr>
<tr><td align="center" colspan="2"><input type="button" id="btn1" value="添加" ></td></tr>
</table>
<table id="mytable" border="1">
<tr>
<th width="40">序号</th>
<th width="80">姓名</th>
<th width="80">价格</th>
<th width="80">数量</th>
<th width="80">小计</th>
<th width="120">操作</th>

</tr>


</table>
<table >
<tr><td>总计:<span id="zj" >0</span></td></tr>

</table>
</center>

</body>

</html>



阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

jquery的表格增删查+数量增加+总价

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭