jquery implementa la función agregar al carrito de compras

Consulte el siguiente código:

Tenga en cuenta que jquery.js.lt;!DOCTYPE?htmlgt;?

lt;htmlgt;?lt;headgt;

lt;titlegt;Carrito de compras----jQuerylt;/titlegt;?

lt;meta?charset="utf-8"?/gt;?

lt; estilo?type="text/css"gt;? h1?{?

text-align: center;? }? tabla?{?

margen : 0?auto;?

ancho: 60;?

borde: 2px?solid?#aaa;?

colapso de borde: colapso;? ? tabla?th,?table?td?{?

borde: 2px?solid?#aaa;?

relleno: 5px;?th?{?

color de fondo: #eee;?}?

lt;/stylegt;?

lt;script?type="text/javascript"?src=". / js/jquery.js"gt;lt;/scriptgt;?

lt;script?type="text/javascript"gt;? function?add_shoppingcart(btn){//Convertir btn(dom) ¿Como un objeto jQuery?

//¿Obtener primero el nombre del producto, el precio unitario y el inventario para su uso posterior?

var?$tds?=?$(btn).parent() . siblings();?

//$tds.eq(0) ¿es un objeto jQuery?$tds[0] ¿es un objeto DOM?

var?name?=? $tds.eq(0).html(); //cadena?

var?precio?=?$tds.eq(1).html(); //cadena?

var ?stock?=?$tds.eq(3).html();//string?

//Comprueba si hay stock en stock?=0?

if(stock ?lt;=?0){? return;?

}?

//No importa si el producto está en el carrito de compras o no, el inventario será -1?

$tds.eq(3).html(--stock);?

//Determine si el producto existe en el carrito de compras antes de agregarlo. Si existe, la cantidad será 1. Si no existe, la cantidad será 1. Luego cree la línea?

var?$trs?=?$("#goodsgt;tr") ;?

for(var?i=0;ilt;$trs.length ; i ){? var?$gtds?=?$trs.eq(i).children();? gName?=?$gtds.eq(0).html();? if(name?== ?gName){//Si existe?

var?num?=?parseInt($gtds. eq(2).children().eq(1).val());?

$gtds.eq(2).children().eq(1

).val(num); //¿Cantidad 1?

//¿Cantidad recalculada?

$gtds.eq(3).html(price*num);?

return; //¿El siguiente código ya no se ejecutará? }?

}?

//Si no existe, ¿agregarlo después de la creación?

var?li?=? "lt；trgt;" ?

"lt;tdgt;" nombre "lt;/tdgt;" lt;tdgt;" precio " lt;/tdgt;" ?

"lt;td?align='center'gt;" ? "lt;input?type='button'?value='- '?onclick='decrease( this);'/gt;?" ? "lt;input?type='text'?size='3'?readonly?value='1'/gt;?" ? "lt; input?type='button' ?value=' '?onclick='increase(this);'/gt;" ?

"lt;/tdgt;" ?

" lt;tdgt;" precio " lt;/tdgt;" ?

"lt;td?align='center'gt;" ? "lt;input?type='button'?value='x '?onclick='del( this);'/gt;" ?

"lt;/tdgt;" ? "lt;/trgt;"?

//Añadir a ¿#bienes?

$("#bienes").append($(li));?

//Función total?

total(); ? }? // Método auxiliar: haga clic en el botón ""?"-"?"x" en el carrito de compras para encontrar el td donde se encuentra el producto relevante y devolverlo como un objeto jQuery. ){?

var? name?=?$(btn).parent().siblings().eq(0).html() //¿Obtener el nombre del producto?

//Tenga en cuenta que la tabla tiene agrupación de filas de forma predeterminada, si es así. Si ?$("#table1gt;tr:gt(0)") se usa en todas partes, no hay tr?

var?$trs ?=?$("#table1gt;tbodygt;tr:gt( 0)");?

for(var?i=0;ilt;$trs.length;i){?var?fName ?=?$trs.eq(i).children(). eq(0).html();? if(name?==?fName){//¿Encontrar producto coincidente?

return? $trs.eq(i).children().eq( 3);? }?

}? //¿Agregar función " "?incrementar(btn){?

//Obtener el inventario de productos para ver si;= 0?

var?$stock?=?findStock(btn);?

var?stock?=? $stock.html();?

if(stock?lt;=?0){? return;?

}?

//stock- 1

$stock.html(-- acción

);?

//¿Cambios en los datos del carrito de compras?

var?$td?=?$(btn).prev();?

var? num?=?parseInt($td.val());//number?

//¿Num es de tipo número en este momento (se convertirá automáticamente a tipo número durante el cálculo)?

$td.val(num);?

//¿Obtener el precio unitario y convertirlo a tipo numérico antes de agregar el cálculo?

var?price?= ?parseInt($ (btn).parent().prev().html());?

$(btn).parent().next().html(num*precio);?

//Función total?

total();? }? //¿Función de disminución "-"?decrease(btn){?

/ /La cantidad del producto =1, ¿ya no se puede reducir?

var?num?=?parseInt($(btn).next().val());?

if(num?lt; =?1){? return;?

}?

var?$stock?=?findStock(btn);?

//Acciones 1?

var?stock?=?$stock.html();?

$stock.html( acciones);?

//Cantidad de artículos - 1 ?

$(btn).next().val(--num);?

//¿Recalcular la cantidad?

var?price?= ?parseInt($(btn).parent().prev().html());?

$(btn).parent().next() .html(precio*num);?

//Función total?

total();? }? //¿Función del botón de eliminación "x"? {?

//¿Devolver la cantidad del producto al inventario?

var?$stock?=?findStock(btn);?

var?stock?= ?parseInt($stock.html()) ;?

var?num?=?parseInt($(btn).parent().prev().prev().children().eq( 1).val());?

$stock.html(num? ?stock);?

//¿Borrar la lista de productos modificados?

$(btn).parent().parent( ).remove();?

//Función total?

total();? p>//Función total?

function?total(){? //¿Obtener todos los trs en el carrito de compras?$trs?=?$("#goods?tr");? ?cantidad?=?0;? for(var? i=0;ilt;$trs.length;i ){?

var?money?=?parseInt($trs.eq(i). niños().eq(3).html() );?

cantidad? =?dinero;? }?

$("#total").html(cantidad);?

}?

lt;/scriptgt;?lt;/headgt;?lt;bodygt;?

lt;h1gt;Qué gangalt;/h1gt;?

lt;table?id="table1"gt;?lt;trgt;?

lt;thgt ;Productos básicoslt;/thgt;?

lt;thgt;Precio unitario (yuanes)lt;/thgt;?

lt;thgt;Colorlt;/thgt;?

lt;thgt;Inventariolt;/thgt;?

lt;thgt;Tasa de popularidadlt;/thgt;?

lt;thgt;Operaciónlt;/thgt ;?lt; /trgt;?lt;trgt;?

lt;tdgt;Logitech M185 Mouselt;/tdgt;?

lt;tdgt;80lt;/tdgt;?

lt;tdgt;blacklt;/tdgt;?

lt;tdgt;5lt;/tdgt;?

lt;tdgt;98lt;/tdgt ;?

lt;td?align="center"gt;? lt;input?type="button"?value="Agregar al carrito"?onclick="add_shoppingcart(this);"/gt ;?

lt;/tdgt;?lt;/trgt;?lt;trgt;?

lt;tdgt;Teclado Microsoft X470lt;/tdgt;?

lt;tdgt; 150lt;/tdgt;?

lt;tdgt;blacklt;/tdgt;?

lt;tdgt;9028lt;/tdgt;?

lt ;tdgt;96lt;/tdgt;?

lt;td?align="center"gt;? lt;input?type="button"?value="Agregar al carrito "?onclick="add_shoppingcart (esto);"/gt;?

lt;/tdgt;?lt;/trgt;?lt;trgt;?

lt;tdgt; Locke teléfono móvil iphone6 caselt;/tdgt;?

lt;tdgt;60lt;/tdgt;?

lt;tdgt;transparentlt;/tdgt;?

lt;tdgt ;672lt;/tdgt;?

lt;tdgt;99lt;/tdgt;?

lt;td?align="center"gt;?lt; input?type=" botón"?value="Añadir al carrito"?onclick="add_shoppingcart(this);"/gt;?

lt;/tdgt;?lt;/trgt;?lt; trgt;?

lt;tdgt;Auriculares Bluetoothlt;/tdgt;?

lt;tdgt;100lt;/tdgt;?

lt;tdgt;bluelt;/tdgt;?

lt;tdgt;8937lt;/tdgt;?

lt;tdgt;95lt;/tdgt;?

lt ;td?align="centro" gt;?lt;entrada?

type="button"?value="Agregar al carrito"?onclick="add_shoppingcart(this);"/gt;?

lt;/tdgt;?lt;/trgt;?lt;trgt; ?

lt;tdgt;Kingston U disklt;/tdgt;?

lt;tdgt;70lt;/tdgt;?

lt;tdgt;rojo lt ;/tdgt;?

lt;tdgt;482lt;/tdgt;?

lt;tdgt;100lt;/tdgt;?

lt;td ? align="center"gt;?lt;input?type="button"?value="Agregar al carrito"?onclick="add_shoppingcart(this);"/gt;?

lt;/ tdgt ;?lt;/trgt;?

lt;/tablegt;?

lt;h1gt;Carrito de compraslt;/h1gt;?

lt; ? lt;theadgt;?

lt;trgt;? lt;thgt;Productos básicoslt;/thgt; lt;/thgt;?lt;thgt;Cantidad (yuanes)lt;/thgt;?lt;thgt ;Eliminarlt;/thgt;?

lt;/trgt;?lt;/theadgt;? lt;tbody?id="bienes"gt;?lt;/tbodygt;?lt;tfootgt;?

lt;trgt;?lt;td?colspan="3"?align="right" gt;Totallt;/tdgt;?lt;td?id="total"gt;lt;/tdgt; ?lt;tdgt;lt;/tdgt;?

lt;/trgt;?lt ;/tfootgt;?

lt;/tablegt;? /p>

lt;/htmlgt;

Renderizado final: