- 注意：请自动忽略css，实在是太丑了 ? ? ?
- 使用 jQuery 实现的购物车，代码量要小于DOM版，开发效率更高
1、DOM版
<html>
<head>
<meta charset="UTF-8">
<title>DOM版我的购物车</title>
<style>
#tb{
border:1px solid #000;
width: 750px;
border-collapse: collapse;
}
#tb td{
border:1px solid #000;
}
</style>
</head>
<body>
<p>
<input type="text" placeholder="商品名称" id="goodsName">
<input type="text" placeholder="商品价格" id="goodsPrice">
<input type="text" placeholder="商品数量" id="goodsNum">
<button onclick="buttonAdd()">增加</button>
</p>
<table id="tb">
<thead>
<tr>
<td>商品名称</td>
<td>商品价格</td>
<td>商品数量</td>
<td>操作</td>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
<script>
function $(id) {
return document.getElementById(id);
}
function buttonAdd() {
var goodsName = $("goodsName").value;
var goodsPrice = $("goodsPrice").value;
var goodsNum = $("goodsNum").value;
var tdGoodsName = document.createElement("td");
tdGoodsName.innerHTML = goodsName;
var tdGoodsPrice = document.createElement("td");
tdGoodsPrice.innerHTML = goodsPrice;
var tdGoodsNum = document.createElement("td");
tdGoodsNum.innerHTML = goodsNum;
var tdOperation = document.createElement("td");
var buttonDel = document.createElement("button");
buttonDel.innerHTML = "删除";
buttonDel.onclick = function () {
if(confirm("确定删除")){
$("tbody").removeChild(this.parentNode.parentNode);
}
};
var buttonUpdate = document.createElement("button");
buttonUpdate.innerHTML = "修改";
buttonUpdate.onclick = function(){
var goodsNumTd = this.parentNode.previousSibling;
var goodsNum = goodsNumTd.innerHTML;
if(this.innerHTML == "修改"){
this.innerHTML = "确定";
var td = this.parentNode.previousElementSibling;
var text = "<input type='text' value='" + td.innerText+ "'>";
var btnRedu = "<button id='btnRedu'>-</button>";
var btnAdd = "<button id='btnAdd'>+</button>";
td.innerHTML = btnRedu + text + btnAdd;
$("btnRedu").onclick = function(){
var textNode = this.nextElementSibling;
if(parseInt(textNode.value) > 1){
textNode.value = parseInt(textNode.value) - 1;
}else {
textNode.value = 1;
}
};
$("btnAdd").onclick = function(){
var textNode = this.previousElementSibling;
if(parseInt(textNode.value) >= 1){
textNode.value = parseInt(textNode.value) + 1;
}else {
textNode.value = 1;
}
}
}else if(this.innerHTML == "确定"){
this.innerHTML = "修改";
var td = this.parentNode.previousElementSibling;
var changedNum = td.children;
var num = changedNum[1].value;
td.innerHTML = num;
}
};
tdOperation.appendChild(buttonUpdate);
tdOperation.appendChild(buttonDel);
var tr = document.createElement("tr");
tr.appendChild(tdGoodsName);
tr.appendChild(tdGoodsPrice);
tr.appendChild(tdGoodsNum);
tr.appendChild(tdOperation);
$("tbody").appendChild(tr);
}
</script>
</body>
</html>
2、jQuery版
<html>
<head>
<meta charset="UTF-8">
<title>jQuery版我的购物车</title>
<script src="jquery-2.1.1.js"></script>
<style>
#tab{
border:1px solid #000;
width: 750px;
border-collapse: collapse;
}
#tab td{
border:1px solid #000;
}
</style>
</head>
<body>
<p>
<input type="text", placeholder="商品名称", id="goodsName">
<input type="text", placeholder="商品价格", id="goodsPrice">
<input type="text", placeholder="商品数量", id="goodsNum">
<button id="btn">添加</button>
</p>
<p>
<table id="tab">
<thead>
<tr>
<td>商品名称</td>
<td>商品价格</td>
<td>商品数量</td>
<td>操作</td>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
</p>
<script>
$(function () {
$("#btn").click(function () {
var $goodsName = $("<td></td>");
var goodsName = $("#goodsName").val();
$goodsName.html(goodsName);
var $goodsPrice = $("<td></td>");
var goodsPrice = $("#goodsPrice").val();
$goodsPrice.html(goodsPrice);
var $goodsNum = $("<td></td>");
var goodsNum = $("#goodsNum").val();
$goodsNum.html(goodsNum);
var $goodsOpt = $("<td></td>");
var $delBtn = $("<button></button>");
var $updataBtn = $("<button></button>");
$delBtn.html("删除");
$updataBtn.html("修改");
$goodsOpt.append($delBtn);
$goodsOpt.append($updataBtn);
$delBtn.click(function () {
$(this).parent().parent().remove();
});
$updataBtn.click(function () {
if($(this).html() == "修改"){
$(this).html("确定");
var $gNumInput = $("<input>");
var $btnAdd = $("<button>+</button>");
var $btnRedu = $("<button>-</button>");
var gNum = $(this).parent().prev().html();
$(this).parent().prev().empty();
$gNumInput.val(gNum);
$(this).parent().prev().append($btnAdd);
$(this).parent().prev().append($gNumInput);
$(this).parent().prev().append($btnRedu);
$btnAdd.click(function () {
var gNum = $(this).next().val();
if (gNum > 0){
$(this).next().val(++gNum);
}else if (gNum <=0){
$(this).next().val(1);
}
});
$btnRedu.click(function () {
var gNum = $(this).prev().val();
if (gNum > 1){
$(this).prev().val(--gNum);
}else if (gNum <= 1){
$(this).prev().val(1);
}
});
} else if($(this).html() == "确定"){
$(this).html("修改");
var updateNum = $(this).parent().prev().children("input").val();
if (updateNum > 0){
$(this).parent().prev().html(updateNum);
} else if (updateNum < 0) {
$(this).parent().prev().html(1);
} else if (updateNum == 0){
$(this).parent().parent().remove();
}
}
});
var $tr = $("<tr></tr>");
$tr.append($goodsName);
$tr.append($goodsPrice);
$tr.append($goodsNum);
$tr.append($goodsOpt);
$("#tbody").append($tr);
})
})
</script>
</body>
</html>
