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

最新推荐文章于 2021-08-30 07:44:58 发布

yin_chenglong

最新推荐文章于 2021-08-30 07:44:58 发布

阅读量770

点赞数

本文链接：https://blog.csdn.net/yin_chenglong/article/details/79979676

版权

<!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='-'/> "
+"<span>"+countV+"</span>"
+" <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>