怎样用js统计一下ID变化的总价？

kao666 2009-12-16 03:19:09
怎样用js统计一下的总价？

ID是变化的，所以不能用ID来获取值然后相乘，价钱的ID一定包含lbPrice。数量的id一定包含txtAcount

总价 =单价×数量

想得到结果：2000×1+20000×1+2000×1







<tr style="background-color:#ffffff"> 

												<td align="left"><span id="Repeater1_ctl01_lbName">三星2312</span></td>

	<td align="left"><span id="Repeater1_ctl01_lbPrice">2000</span></td>

	<td align="left">  <input name="Repeater1$ctl01$txtAcount" type="text" value="1" id="Repeater1_ctl01_txtAcount" class="number" /></td>

															

</tr>

<tr style="background-color:#ffffff"> 				

					                        						<td align="left"><span id="Repeater1_ctl02_lbName">苹果2312445</span></td>

	<td align="left"><span id="Repeater1_ctl02_lbPrice">20000</span></td>

	<td align="left">  <input name="Repeater1$ctl02$txtAcount" type="text" value="1" id="Repeater1_ctl02_txtAcount" class="number" /></td>

												

<tr style="background-color:#ffffff"> 

												<td align="left"><span id="Repeater1_ctl03_lbName">N75</span></td>

	<td align="left"><span id="Repeater1_ctl03_lbPrice">2000</span></td>

	<td align="left">  <input name="Repeater1$ctl03$txtAcount" type="text" value="1" id="Repeater1_ctl03_txtAcount" class="number" /></td>

												

</tr>
...全文
196 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
daiyaochu 2009-12-17
  • 打赏
  • 举报
 回复
学习了
kao666 2009-12-17
  • 打赏
  • 举报
 回复
我不知道为什么不能感知数量变化，我是windows.open 打开购物车的页面的。
mykelly6 2009-12-16
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 xmliy 的回复:]
用jQuery

JScript codevar account=0;
$('span[id*=lbPrice]').each(function() {
account+= parseInt($(this).text())*
parseInt($(this).parents('tr').find('input').val());
});
alert(account);
[/Quote]
恩，用css选择器做就好了。

shenzhenNBA 2009-12-16
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 kao666 的回复:]
试了5楼的，计算准确，就是不能感知数值的变化，一直都是按照原来的数量统计
[/Quote]
所有数量的input对象都加 onchange 事件，比如下面：

<input name="Repeater1$ctl02$txtAcount" type="text" value="1" onChange="javascript:calculate()" id="Repeater1_ctl02_txtAcount" class="number"/>
anly_hz 2009-12-16
  • 打赏
  • 举报
 回复
那样写不行么？修改数据可以及时改变统计值的啊．
kao666 2009-12-16
  • 打赏
  • 举报
 回复
试了5楼的，计算准确，就是不能感知数值的变化，一直都是按照原来的数量统计
anly_hz 2009-12-16
  • 打赏
  • 举报
 回复 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

 </HEAD>



 <BODY>

<script type="text/javascript" language="javascript">

function calculate(){

var rows = document.getElementById("tab").rows;

var t = 0;

for(var i=0;i<rows.length;i++){

var price = rows(i).cells(1).getElementsByTagName("SPAN")[0].innerText;

var count = rows(i).cells(2).getElementsByTagName("INPUT")[0].value;

t += price*count;

}

document.getElementById('sum').innerHTML = t;

}

</script>

<body>

<table width="100%"  border="0" id="tab">

<tr style="background-color:#ffffff">                 

<td align="left"><span id="Repeater1_ctl02_lbName">苹果2312445</span></td>

<td align="left"><span id="Repeater1_ctl02_lbPrice">20000</span></td>

<td align="left"><input name="Repeater1$ctl02$txtAcount" type="text" value="1" id="Repeater1_ctl02_txtAcount" class="number" onkeyup="calculate()" /></td>

                                                

<tr style="background-color:#ffffff"> 

<td align="left"><span id="Repeater1_ctl03_lbName">N75</span></td>

<td align="left"><span id="Repeater1_ctl03_lbPrice">2000</span></td>

<td align="left"><input name="Repeater1$ctl03$txtAcount" type="text" value="1" id="Repeater1_ctl03_txtAcount" class="number" 

onkeyup="calculate()"/></td>

</tr>

<tr style="background-color:#ffffff"> 

<td align="left"><span id="Repeater1_ctl04_lbName">N75</span></td>

<td align="left"><span id="Repeater1_ctl04_lbPrice">2000</span></td>

<td align="left">  <input name="Repeater1$ctl03$txtAcount" type="text" value="1" id="Repeater1_ctl03_txtAcount" class="number"

onkeyup="calculate()"/></td>

</tr>

</table>

<input type="button" name="Submit" value="计算" onClick="javascript:calculate();">

<span id="sum"></span>

</body>

</html>



 </BODY>

</HTML>
kao666 2009-12-16
  • 打赏
  • 举报
 回复
无论怎样修改数字，那个value一直都是1 。
anly_hz 2009-12-16
  • 打赏
  • 举报
 回复
在文本框中加个onchange事件．去重新调下计算方法．
也可以在下面做个按钮点击事件．调下计算方法．
kao666 2009-12-16
  • 打赏
  • 举报
 回复
有一个问题就是。当改变textbox的数量的时候。统计的数值还是按照原来的数量统计，修改数量不起作用
shenzhenNBA 2009-12-16
  • 打赏
  • 举报
 回复
这样看看...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>Test</title>

</head>

<style type="text/css"> 

body,td,div,input,fieldset,legend{font-family:Verdana; font-size:12px; color:#333333; font-weight:normal;}

td{line-height:20px;}

a:link,a:visited{font-family:Verdana; font-size:12px; color:#330099; font-weight:normal;  text-decoration:none;}

a:hover,a:active{font-family:Verdana; font-size:12px; color:#FF6600; font-weight:normal; }

span{font-family:Verdana; font-size:12px; color:red; font-weight:normal; display:block;}

.cur01{background-color:#00CCFF; color:#FF3300; font-weight:bold;}

</style>

<script type="text/javascript" language="javascript">

function calculate(){

var likePriceID="lbPrice"; 	//价格包含的字符串

var likeAcountID="txtAcount";	 //数量包含的字符串

var pList=document.getElementsByTagName("span");

var aList=document.getElementsByTagName("input");

var v=0;

var total=0;

for(var i=0;i<pList.length;i++){

		try{

			v=0;

			if(pList[i].id.indexOf(likePriceID)>0) v = parseInt(pList[i].innerHTML,10);

			if(aList[i].id.indexOf(likeAcountID)>0) v=v*parseInt(aList[i].value,10);

		}catch(e){}

		total+=v;

	}

alert("总价为: "+total);

}

</script>

<body>

<table width="100%"  border="0">

<tr style="background-color:#ffffff">                 

<td align="left"><span id="Repeater1_ctl02_lbName">苹果2312445</span></td>

<td align="left"><span id="Repeater1_ctl02_lbPrice">20000</span></td>

<td align="left"><input name="Repeater1$ctl02$txtAcount" type="text" value="1" id="Repeater1_ctl02_txtAcount" class="number" /></td>

                                                

<tr style="background-color:#ffffff"> 

<td align="left"><span id="Repeater1_ctl03_lbName">N75</span></td>

<td align="left"><span id="Repeater1_ctl03_lbPrice">2000</span></td>

<td align="left"><input name="Repeater1$ctl03$txtAcount" type="text" value="1" id="Repeater1_ctl03_txtAcount" class="number" /></td>

</tr>

<tr style="background-color:#ffffff"> 

<td align="left"><span id="Repeater1_ctl03_lbName">N75</span></td>

<td align="left"><span id="Repeater1_ctl03_lbPrice">2000</span></td>

<td align="left">  <input name="Repeater1$ctl03$txtAcount" type="text" value="1" id="Repeater1_ctl03_txtAcount" class="number" /></td>

</tr>

</table>

<input type="button" name="Submit" value="计算" onClick="javascript:calculate();">

</body>

</html>
xmliy 2009-12-16
  • 打赏
  • 举报
 回复
用jQuery



var account = 0;

$('span[id*=lbPrice]').each(function() {

  account += parseInt($(this).text()) * 

    parseInt($(this).parents('tr').find('input').val());

});

alert(account);
qqzeng-ip 2009-12-16
  • 打赏
  • 举报
 回复
for (var i=1; i <= ....length; i++)
{
document.getElementById('Repeater1_ctl0'+i+'_lbPrice').value)
......

类推..document.getElementById('Repeater1$ctl0'+i+'$txtAcount').value)


计算..
浪尖赏花 2009-12-16
  • 打赏
  • 举报
 回复 
<table id="tab">

<tr style="background-color:#ffffff"> 

                                                <td align="left"><span id="Repeater1_ctl01_lbName">三星2312</span></td>

    <td align="left"><span id="Repeater1_ctl01_lbPrice">2000</span></td>

    <td align="left">  <input name="Repeater1$ctl01$txtAcount" type="text" value="1" id="Repeater1_ctl01_txtAcount" class="number" /></td>

                                                            

</tr>

<tr style="background-color:#ffffff">                 

                                                                    <td align="left"><span id="Repeater1_ctl02_lbName">苹果2312445</span></td>

    <td align="left"><span id="Repeater1_ctl02_lbPrice">20000</span></td>

    <td align="left">  <input name="Repeater1$ctl02$txtAcount" type="text" value="1" id="Repeater1_ctl02_txtAcount" class="number" /></td>

                                                

<tr style="background-color:#ffffff"> 

                                                <td align="left"><span id="Repeater1_ctl03_lbName">N75</span></td>

    <td align="left"><span id="Repeater1_ctl03_lbPrice">2000</span></td>

    <td align="left">  <input name="Repeater1$ctl03$txtAcount" type="text" value="1" id="Repeater1_ctl03_txtAcount" class="number" /></td>

                                                

</tr>



</table>

<script>

var t = 0;

var rows = document.getElementById("tab").rows;

for(var i=0;i<rows.length;i++){

var price = rows(i).cells(1).getElementsByTagName("SPAN")[0].innerText;

var count = rows(i).cells(2).getElementsByTagName("INPUT")[0].value;

t += price*count;

}

alert(t);

</script>
sohighthesky 2009-12-16
  • 打赏
  • 举报
 回复 


//在页面body后加个script标签，把这段代码放在里面

var tb=document.getElementById("<%=Repeater1.ClientID %>");

for(var i=0;i<tb.rows.length;i++) {//两个for循环如果有标题则改成从1开始循环

    tb.rows[i].cells[2].firstChild.onkeyup=function() {

        var total=0;

        for(var j=0,c,p;j<tb.rows.length;j++) {

            p=tb.rows[i].cells[1].firstChild.innerHTML-0,c=tb.rows[i].cells[2].firstChild.value-0;

            if(!isNaN(p) && !isNaN(c);

                total+=p*c;

        }

        document.getElementById("total").innerHTML=total.toFixed(2);//指定要显示总价的id

    }

}
JavaScript - Node.JS教程系列
Node.JS是一套使用JavaScript语言的后台。它执行Javascript的速度非常快，性能非常好。是近几年来火的公司首选后台语言之一，同时也是前后台人员争先恐后学习的后台语言。
vue@2.6.14购物车统计总价
阅读目录运行效果源码htmlCSSVue素材图片源码解析布局和引入 vue准备列表数据记录产品是否有选中步骤1 数量加减步骤 2 选中展示价格步骤 3 全选步骤 4 删除 运行效果 源码 html代码中需要插入css代码，在最下方需插入vue代码即可运行。 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</tit
《风尚坐火箭学习vue》-- 第十章：Vue中的监听watch用法及商品总价实例
Vue中的监听watch用法及商品总价实例
Vue购物车功能计算总价/全选/删除
设置4行数据显示在页面上 点击删除可以删除当前行 点击全选可以全选（不用和删除其他功能有关系），输入购买数量，总金额会改变
《Vue.js实战》利用计算属性，指令等开发购物车
文章目录效果预览实现思路完整代码index.htmlindex.jsstyle.css 效果预览 例子来源于《Vue.js实战》ch5.5练习题。 购物车需要一个已加入购物车的商品列表，可以实时显示购买的总价，可以增减购买数量，或移除条目，也可以分类结算 实现思路 本实例有3个文件 index.html （引入资源及模板） index.js （Vue实例及业务代码） style.css（样式） 用到的数据是一个数组list，部分数据格式如下 data() { return { /
JavaScript

87,922

社区成员

224,618

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章