JQueryはショッピングカートの数量のプラスマイナス総価格の累加を実現する
12422 ワード
jQuery +
$(function(){
$(".add").click(function(){
var t = $(this).parent().find('input[class*=text_box]');
t.val(parseInt(t.val())+1);
setTotal();
})
$(".min").click(function(){
var t = $(this).parent().find("input[class*=text_box]");
t.val(parseInt(t.val())-1);
if(parseInt(t.val())<0){
t.val(0);
}
setTotal()
})
function setTotal(){
var sum = 0;
$("#tab td").each(function(){
var num = parseInt($(this).find("input[class*=text_box]").val());
var price = parseFloat($(this).find("span[class*=price]").text());
sum += num*price;
})
$("#total").html(sum.toFixed(2));
}
setTotal();
})
:1.50
:3.95
：
trの次の最初のtdを取得する値をもう1つ挙げます.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"/>
<script>
$(function(){
$(".add").click(function(){
var t = $(this).parent().parent().find('td:first');
console.info(t.text());
})
})
</script>
<table id="tab">
<tr>
<th>ID</th>
<th>name</th>
<th> </th>
</tr>
<tr>
<td class="id">123</td>
<td>admin</td>
<td><a href="#" class="add"> </a></td>
</tr>
<tr>
<td class="id">456</td>
<td>ceshi</td>
<td><a href="#" class="add"> </a></td>
</tr>
<br/>
<br/>
<p><br/></p>
<!--PC WAP -->
<script type="text/javascript" src="/views/front/js/chanyan.js"/>
<!-- - -->
<div class="col-md-3">
<div class="row" id="ad">
<!-- - 1 -->
<div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
</div>
<!-- - 2 -->
<div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
</div>
<!-- - 3 -->
<div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
</div>
</div>
</div>
<div class="container">
<h4 class="pt20 mb15 mt0 border-top"> </h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="#!/article/10.htm" title="jsonp util " rel="nofollow">jsonp util </a>
<span class="text-muted">hw1287789687</span>
<a class="tag" taget="_blank" href="#!/search/jsonp/1.htm" rel="nofollow">jsonp</a><a class="tag" taget="_blank" href="#!/search/jsonp%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95/1.htm" rel="nofollow">jsonp </a><a class="tag" taget="_blank" href="#!/search/jsonp+callback/1.htm" rel="nofollow">jsonp callback</a>
</li>
<li><a href="#!/article/137.htm" title=" " rel="nofollow"> </a>
<span class="text-muted">alafqq</span>
<a class="tag" taget="_blank" href="#!/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm" rel="nofollow"> </a>
</li>
<li><a href="#!/article/264.htm" title="Maven —— Maven " rel="nofollow">Maven —— Maven </a>
<span class="text-muted">Kai_Ge</span>
<a class="tag" taget="_blank" href="#!/search/maven/1.htm" rel="nofollow">maven</a>
</li>
<li><a href="#!/article/391.htm" title="placeholder " rel="nofollow">placeholder </a>
<span class="text-muted">120153216</span>
<a class="tag" taget="_blank" href="#!/search/placeholder/1.htm" rel="nofollow">placeholder</a>
</li>
<li><a href="#!/article/518.htm" title="debian_ iso apt " rel="nofollow">debian_ iso apt </a>
<span class="text-muted">2002wmj</span>
<a class="tag" taget="_blank" href="#!/search/Debian/1.htm" rel="nofollow">Debian</a>
</li>
<li><a href="#!/article/645.htm" title="SQLSERVER SQL" rel="nofollow">SQLSERVER SQL</a>
<span class="text-muted">357029540</span>
<a class="tag" taget="_blank" href="#!/search/SQL+Server/1.htm" rel="nofollow">SQL Server</a>
</li>
<li><a href="#!/article/772.htm" title="com/genuitec/eclipse/j2eedt/core/J2EEProjectUtil" rel="nofollow">com/genuitec/eclipse/j2eedt/core/J2EEProjectUtil</a>
<span class="text-muted">7454103</span>
<a class="tag" taget="_blank" href="#!/search/eclipse/1.htm" rel="nofollow">eclipse</a>
</li>
<li><a href="#!/article/899.htm" title=" html " rel="nofollow"> html </a>
<span class="text-muted">adminjun</span>
<a class="tag" taget="_blank" href="#!/search/java/1.htm" rel="nofollow">java</a><a class="tag" taget="_blank" href="#!/search/html/1.htm" rel="nofollow">html</a><a class="tag" taget="_blank" href="#!/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm" rel="nofollow"> </a><a class="tag" taget="_blank" href="#!/search/%E5%8E%BB%E6%8E%89html%E6%A0%87%E7%AD%BE/1.htm" rel="nofollow"> html </a>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="container">
<div class="indexes">
<strong> ：</strong>
<a href="#!/tags/A/1.htm" rel="nofollow">A</a><a href="#!/tags/B/1.htm" rel="nofollow">B</a><a href="#!/tags/C/1.htm" rel="nofollow">C</a><a href="#!/tags/D/1.htm" rel="nofollow">D</a><a href="#!/tags/E/1.htm" rel="nofollow">E</a><a href="#!/tags/F/1.htm" rel="nofollow">F</a><a href="#!/tags/G/1.htm" rel="nofollow">G</a><a href="#!/tags/H/1.htm" rel="nofollow">H</a><a href="#!/tags/I/1.htm" rel="nofollow">I</a><a href="#!/tags/J/1.htm" rel="nofollow">J</a><a href="#!/tags/K/1.htm" rel="nofollow">K</a><a href="#!/tags/L/1.htm" rel="nofollow">L</a><a href="#!/tags/M/1.htm" rel="nofollow">M</a><a href="#!/tags/N/1.htm" rel="nofollow">N</a><a href="#!/tags/O/1.htm" rel="nofollow">O</a><a href="#!/tags/P/1.htm" rel="nofollow">P</a><a href="#!/tags/Q/1.htm" rel="nofollow">Q</a><a href="#!/tags/R/1.htm" rel="nofollow">R</a><a href="#!/tags/S/1.htm" rel="nofollow">S</a><a href="#!/tags/T/1.htm" rel="nofollow">T</a><a href="#!/tags/U/1.htm" rel="nofollow">U</a><a href="#!/tags/V/1.htm" rel="nofollow">V</a><a href="#!/tags/W/1.htm" rel="nofollow">W</a><a href="#!/tags/X/1.htm" rel="nofollow">X</a><a href="#!/tags/Y/1.htm" rel="nofollow">Y</a><a href="#!/tags/Z/1.htm" rel="nofollow">Z</a><a href="#!/tags/0/1.htm" rel="nofollow"> </a>
</div>
</div>
</div>
<footer id="footer" class="mb30 mt30">
<div class="container">
<div class="footBglm">
<a href="#!/" rel="nofollow"> </a> -
<a href="#!/custom/about.htm" rel="nofollow"> </a> -
<a href="#!/search/Java/1.htm" rel="nofollow"> </a> -
<a href="#!/sitemap.xml" rel="nofollow">Sitemap</a> -
<a href="#!/custom/delete.htm" rel="nofollow"> </a>
</div>
<div class="copyright"> IT CopyRight © 2000-2050 IT IT610.com , All Rights Reserved.
<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank"> ICP 09083238 </a><br/>
</div>
</div>
</footer>
<!-- -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"/>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"/>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"/>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"/>
</table></code></pre></div></div></div></div>