高分求解一个JS的问题，是关于商品总价的.
我想实现的效果是，商品数量变化，金额变化，然后总价变化。我自己已经写出了数量变化，金额变化的JS代码了，但是总价变化的地方出现了很多问题，所以你只需帮我解决总价的问题就行...
我想实现的效果是，商品数量变化，金额变化，然后总价变化。我自己已经写出了数量变化，金额变化的JS代码了，但是总价变化的地方出现了很多问题，所以你只需帮我解决总价的问题就行了。PS，这只是举例子，商品数量是不定的，价格也是多变的，那些写死的就不用啦。我之前用下面这个来实现，明显是写死了，假如商品数量增加一件，方法就失效了，所以这种方法肯定是不要的。oTotal.value=toSmallNumble(parseFloat(aMoney[0].innerHTML)+parseFloat(aMoney[1].innerHTML)+parseFloat(aMoney[2].innerHTML))//上面和下面的代码中oTotal是总价，aMoney是每件商品的金额（单价*数量）//下面是我的修改方法，但是出错了，为什么？for(i=0;i<aMoney.length;i++)//求总价{ aResult.push(parseFloat(aMoney[i].innerHTML)) sum+=aResult[i];}oTotal.value=sum问题就是，实现商品数量变化，金额变化，然后总价变化，怎么实现呢？还有一个问题在代码里面。记住要使用JS代码！
展开
2个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8" />
<style>
#data{
width:800px;
border:1px solid #333;
border-collapse:collapse;
}
#data td,#data th{
border:1px solid #333;
text-align:center;
}
#data td[colspan="3"]{
text-align:right;
}
</style>
<script>
function calc(btn){
//1、向上一级找 td
var td = btn.parentNode;
//2、查找第二个子节点
var span = td.children[1];
//3、如果 btn.innerHTML == +
if(btn.innerHTML == "+"){
span.innerHTML = parseInt(span.innerHTML)+1;
}else{
if(span.innerHTML == "1"){
span.innerHTML="1";
}else{
span.innerHTML = parseInt(span.innerHTML)-1;
}
}
//计算小计
var tds = td.parentNode.getElementsByTagName("td");
//从tds[1]中，取出单价
var price = parseInt(tds[1].innerHTML);
console.log("单价:"+price);
var allPrice = price * parseInt(span.innerHTML);
console.log("小计:"+allPrice);
tds[3].innerHTML=allPrice;
//总计
var sum = 0;//用于累加 小计的和
var tbody = document.getElementsByTagName("tbody");
//获取tbody下所有的tr
var trs = tbody[0].children;
//循环遍历tr数组，获取每一个tr
for(var i=0;i<trs.length;i++){
//获取每一个 tr
var tr = trs[i];
//获取tr里面最后一个元素节点
var td = tr.lastElementChild;
sum = sum + parseInt(td.innerHTML);
}
//为 id=sum的td 赋值
document.getElementById("sum").innerHTML=sum;
}
</script>
</head>
<body>
<table id="data">
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>iphone6</td>
<td>4488</td>
<td>
<button onclick="calc(this)">-</button>
<span>1</span>
<button onclick="calc(this)">+</button>
</td>
<td>4488</td>
</tr>
<tr>
<td>iphone6 plus</td>
<td>5288</td>
<td>
<button onclick="calc(this)">-</button>
<span>1</span>
<button onclick="calc(this)">+</button>
</td>
<td>5288</td>
</tr>
<tr>
<td>iphone6s</td>
<td>5288</td>
<td>
<button onclick="calc(this)">-</button>
<span>1</span>
<button onclick="calc(this)">+</button>
</td>
<td>5288</td>
</tr>
<tr>
<td>iphone6s plus</td>
<td>6088</td>
<td>
<button onclick="calc(this)">-</button>
<span>1</span>
<button onclick="calc(this)">+</button>
</td>
<td>6088</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总计</td>
<td id="sum">0</td>
</tr>
</tfoot>
</table>
</body>
</html>
直接上代码 我用table做的 你看下！！！
<html>
<head>
<title> new document </title>
<meta charset="utf-8" />
<style>
#data{
width:800px;
border:1px solid #333;
border-collapse:collapse;
}
#data td,#data th{
border:1px solid #333;
text-align:center;
}
#data td[colspan="3"]{
text-align:right;
}
</style>
<script>
function calc(btn){
//1、向上一级找 td
var td = btn.parentNode;
//2、查找第二个子节点
var span = td.children[1];
//3、如果 btn.innerHTML == +
if(btn.innerHTML == "+"){
span.innerHTML = parseInt(span.innerHTML)+1;
}else{
if(span.innerHTML == "1"){
span.innerHTML="1";
}else{
span.innerHTML = parseInt(span.innerHTML)-1;
}
}
//计算小计
var tds = td.parentNode.getElementsByTagName("td");
//从tds[1]中，取出单价
var price = parseInt(tds[1].innerHTML);
console.log("单价:"+price);
var allPrice = price * parseInt(span.innerHTML);
console.log("小计:"+allPrice);
tds[3].innerHTML=allPrice;
//总计
var sum = 0;//用于累加 小计的和
var tbody = document.getElementsByTagName("tbody");
//获取tbody下所有的tr
var trs = tbody[0].children;
//循环遍历tr数组，获取每一个tr
for(var i=0;i<trs.length;i++){
//获取每一个 tr
var tr = trs[i];
//获取tr里面最后一个元素节点
var td = tr.lastElementChild;
sum = sum + parseInt(td.innerHTML);
}
//为 id=sum的td 赋值
document.getElementById("sum").innerHTML=sum;
}
</script>
</head>
<body>
<table id="data">
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>iphone6</td>
<td>4488</td>
<td>
<button onclick="calc(this)">-</button>
<span>1</span>
<button onclick="calc(this)">+</button>
</td>
<td>4488</td>
</tr>
<tr>
<td>iphone6 plus</td>
<td>5288</td>
<td>
<button onclick="calc(this)">-</button>
<span>1</span>
<button onclick="calc(this)">+</button>
</td>
<td>5288</td>
</tr>
<tr>
<td>iphone6s</td>
<td>5288</td>
<td>
<button onclick="calc(this)">-</button>
<span>1</span>
<button onclick="calc(this)">+</button>
</td>
<td>5288</td>
</tr>
<tr>
<td>iphone6s plus</td>
<td>6088</td>
<td>
<button onclick="calc(this)">-</button>
<span>1</span>
<button onclick="calc(this)">+</button>
</td>
<td>6088</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总计</td>
<td id="sum">0</td>
</tr>
</tfoot>
</table>
</body>
</html>
直接上代码 我用table做的 你看下！！！
更多追问追答
追问
试了试，确实实现了。我想问你一个类似的问题，我试了一天了，都解决不了。由于代码太长了，我上传去百度云给你看吧。因为你这个还没解决我的一个疑问
追答
没收到通知
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
网易云信
2023-12-06 广告
很高兴能回答您的问题。以下是一段针对“一对一消息组件”的描述，字数在200字左右：该组件支持用户之间的私密交流，让沟通更加直接和高效。通过它，您可以向特定对象发送消息，并实时查看消息状态，包括对方是否已读或未读。同时，该组件还支持富文本消息...
点击进入详情页
本回答由网易云信提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
