数据：以对象的形式存储，对象的成员有商品名称，商品单价，商品购买数量(至少为1)。
一个变量来记录商品总价格
方法:1表格单中提供一个删除键，点击后执行HTML语句，对被点击元素的所在行进行HTML内容的清空。同时，商品的总价应发生变化。
2表格当中实现实现增加按钮和减少按钮各一个实现改变商品数量的功能。同时挑选出所有的标签元素，选择为偶数的元素，为其添加判断该条件，当该行所在的商品数量为1时，减按钮失效。
3要对表格进行填充
方法预想实现
1为其设置点击事件，传递出发事件的的对象($(event))，然后对该元素的HTML内容进行清空。
2使用JS方法获取所有的button元素，为其绑定点击事件，然后其中为偶数的的button添加判断条件，当其绑定的商品数量为1时，按钮的disable属性为true，每次点击的时候就触发一次，仅作用于当前按钮。
点击之后商品的数量和总价都应该发生改变。
3对表格的填充使用v-for进行遍历即可。
4给表格的每行添加id元素，值就是对应的行书就，然后再给button绑定元素监听事件。
方法真正实现
1为其设置点击事件，传递当前事件绑定元素，寻找其父类元素，移除父类元素，或者给父类元素添加隐藏具有隐藏效果的类名
2不需要获取所有的button元素并为偶数的添加判断条件，只需要将其判断传递的参数是否为"-"符号，以及button所在行的数量是否为1即可。点击之后都要进行一次商品总价计算。
3使用v-for对表格进行填充，同时使用step函数给每个行赋予id值，而不是直接使用变量.index的形式，这样会被认为是字符串而不是被当作变量解析。
4给button元素绑定监听事件直接放在html内容中，使用@click进行绑定。
总结：获取点击元素的父元素（要传入事件参数对象）的id：e.target.parentElement.id
思路：利用for循环自动填充表格内容，给行添加id值。利用按钮被点击寻找其父类，获取id值，然后根据按钮的类别和当前商品数量是否为1来进行 *** 作。删除则是隐藏当前元素，也可以真正使用remove移除。
但这回造成表格已有行的混乱。但是只要根据id值来判断删除而不是使用下标也是可以的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车</title>
<link rel="stylesheet" href="../Boostrap/css/bootstrap-theme.css" />
<style type="text/css">
[v-cloak]{
display: none;
}
table{
width: auto;
height: 300px;
text-align: center;
}
thead{
background-color: paleturquoise;
font-weight: 100;
font-size: medium;
}
<button>{
font-size: medium;
box-sizing: border-box;
}
.but1{
width: 20px;
}
.hide{
display: none;
}
td{
padding: 10px;
width: 250px;
height: 100px;
border: 1px solid cadetblue;
}
</style>
<script src="../Vue/vue.js" type="text/javascript" charset="UTF-8"></script>
<script src="../jquery/jquery-3.6.0.min.js" type="text/javascript"></script>
</head>
<body>
<div id="app" v-cloak>
<table>
<thead>
<tr>
<td>第几行</td>
<td>商品名称</td>
<td>商品单价</td>
<td>购买数量</td>
<td> *** 作</td>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in commoding" :id="step(index)">
<td>{{item.index + 1}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td><button @click="getclick($event,'-')" class="but1" id="item.index">-</button>
{{item.num}}
<button @click="getclick($event,'+')" class="but1" id="item.index + 1">+</button></td>
<td @click="delete1(item.index)">删除</td>
</tr>
</tbody>
</table>
<li>总价：{{sum_price}}</li>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
commoding:[
{name:'Apple',price:10,num:1,index:0},
{name:'Orange',price:5,num:1,index:1},
{name:'banner',price:20,num:1,index:2},
],
sum_price:0,
delete_num:0,
},
methods:{
delete1:function(row){
// 删除一行数据
var pj = document.querySelectorAll('tr');
pj[row+1].className = 'hide';
this.commoding[row].num = 0;
//删除会引起一些序列变化，不是特别号，在此我们添加类名将其隐藏
/* if(row != 0)row -= this.delete_num;
pj[row+1].remove();
this.delete_num++;
this.commoding[row].num = 0; */
this.sum();
},
getclick:function(e,str){
var get_row = e.target.parentElement.parentElement.id;
if(str == '-' && this.commoding[get_row].num != 1){
this.commoding[get_row].num--;
}else if(str != '-'){
this.commoding[get_row].num++;
}
this.sum();
},
step:function(bjk){
return bjk;
},
sum:function(){
this.sum_price = this.commoding[0].num *this.commoding[0].price
+this.commoding[1].num *this.commoding[1].price +
this.commoding[2].num *this.commoding[2].price;
console.log(sum_price);
}
}
});
</script>
</body>
</html>
效果如图
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）