jquery部分
创新互联专注于临县企业网站建设,成都响应式网站建设,成都商城网站开发。临县网站建设公司,为临县等地区提供建站服务。全流程按需定制设计,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务
function testAdd(){
var aa=$("#aa");
var bb=$("#bb");
a=parseInt(aa.val());
b=parseInt(bb.val());
b=b+a;
bb.val(b);
bb.innerHTML=bb.value;
}
function testSub(){
var aa=$("#aa");
var bb=$("#bb");
a=parseInt(aa.val());
b=parseInt(bb.val());
b=b-a;
bb.value=b;
bb.innerHTML=bb.value;
}
html部分
body
input type="button" name="add" value="add" onclick="testAdd()"
input type="text" id="aa"
input type="button" name="sub" value="sub" onclick="testSub()"
br/
购物车
input type="text" value="100" id="bb"
/body
给你写好了,很简单,你预览的时候记得引用自己的jQuery文件。
对了,你的table结构有问题,给你稍做了改动。希望对你有用,呵呵
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
style type="text/css"
.changeBG{
background-color:#09F;}
input{
background-color:#E6EFF0;}
.quick span{
display:block;
float:left;
cursor:pointer;
padding:3px;}
label{
cursor:pointer;}
/style
script src="../scripts/jquery-1.4.js" type="text/javascript"/script
script type="text/javascript"
var A=[1,3,9]; //选项A的列表
var B=[2,4,6]; //选项B的列表
$(function(){
$('.quick:contains("A")').click(function(){
change('input',A);});
$('.quick:contains("B")').click(function(){
change('input',B);});
$('.quick:contains("反选")').click(function(){
turnOver();});
$('.quick:contains("取消")').click(function(){
abolish();});
$('.quick span:contains("-")').click(function(){
decrease(10);});
$('.quick span:contains("+")').click(function(){
increase(10);});
$('label').parent().click(function(){
$(this).next().children().toggleClass('changeBG')});
});
function change(str,arr){
for(i=0;iarr.length;i++)
$($(str).get(arr[i]-1)).addClass('changeBG');}
function abolish(){
$('input').removeClass('changeBG');}
function turnOver(){
$('input').toggleClass('changeBG');}
function increase(num){
var a=$('.changeBG');
for(i=0;ia.length;i++)
$(a[i]).val($(a[i]).val()*1+num);}
function decrease(num){
var a=$('.changeBG');
for(i=0;ia.length;i++)
$(a[i]).val($(a[i]).val()*1-num);}
/script
title无标题文档/title
/head
body
table border="0" align="center" cellpadding="0" cellspacing="0"
tr
td align="left"
table
tr
td class="quick"a href="#"FONT color=redA/FONT/a/td
td class="quick"a href="#"FONT color=blueB/FONT/a/td
td class="quick"a href="#"反选/a/td
td class="quick"a href="#"取消/a/td
/tr
/table
/td
/tr
tr
td align="left"
table cellpadding="0" cellspacing="1" border="0"
tr
th序号/th
th值/th
th序号/th
th值/th
th序号/th
th值/th
th序号/th
th值/th
th序号/th
th值/th
/tr
tr
td align="right"label1/label/td
tdinput type="text" name="num[]" value="100" size="12"//td
td align="right"label2/label/td
tdinput type="text" name="num[]" value="110" size="12"//td
td align="right"label3/label/td
tdinput type="text" name="num[]" value="120" size="12"//td
td align="right"label4/label/td
tdinput type="text" name="num[]" value="130" size="12"//td
td align="right"label5/label/td
tdinput type="text" name="num[]" value="140" size="12"//td
/tr
tr
td align="right"label6/label/td
tdinput type="text" name="num[]" value="200" size="12"//td
td align="right"label7/label/td
tdinput type="text" name="num[]" value="210" size="12"//td
td align="right"label8/label/td
tdinput type="text" name="num[]" value="220" size="12"//td
td align="right"label9/label/td
tdinput type="text" name="num[]" value="230" size="12"//td
td align="right"label10/label/td
tdinput type="text" name="num[]" value="240" size="12"//td
/tr
/table
/td
/tr
tr
td align="left" class="quick"
span-/span
span10/span
span+/span
/td
/tr
/table
/body
/html
拿到input的值 当点击+ 索引++就好了 后面的同理 拿到索引*2你的价格就OK了
用oninput事件,在用户输入时触发。
例如:
html:
input type="text" id="qty_item_1" oninput="change_total()"
js:
function change_total() {
var z = $("#qty_item_1").val();
var zz = z*1999;
$("#total_item_1").text(zz);
}