当先锋百科网

首页 1 2 3 4 5 6 7

图书管理系统+购物车JavaScript/Jquery + HTML

实现一个图书管理系统，系统包含图书查询，购物车增加和删除，如下：

图书管理系统首页，列表方式显示所有商品数据

 点击 “添加”超链接，会进行购物车添加，添加的时候会显示会相对应的总价格

 点击不同的图书，会在购物车中添加不同的图书，添加不同的图书的时候，总计也在发生变化

 点击购物车中的 + 按钮 和 – 按钮，相对应的数量会发生变化，如果数量等于1，则数量不能在进行相减,也可以使用文本框的形式实现或者设置 input的type属性为number的形式实现

点击购物车中的 删除按钮，删除当前行之前会进行提示，确认删除当前行的时候，总计也会变化 

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图书管理系统-首页</title>
		<style type="text/css">
			table {
				border-collapse: collapse;
			}

			th {
				background-color: skyblue;
			}

			td {
				text-align: center;
			}
		</style>
		<script src="../jquery-3.6.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function tj1(btn) {
				var date = new Date();
				var year = date.getFullYear(); //年
				var month = date.getMonth() + 1; //月；因为month属性从0开始所以要加1				
				var day = date.getDate(); //天
				var hour = date.getHours(); //小时
				var minute = date.getMinutes(); //分钟
				var second = date.getSeconds(); //秒
				second = second < 10 ? "0" + second : second;
				var currentTime = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;

				
				var tr = btn.parentNode.parentNode
				var price = tr.getElementsByTagName('td')[3].innerText//单价
				var name = tr.getElementsByTagName('td')[0].innerText//商品
				var trs = document.getElementsByTagName('table')[1].getElementsByTagName('tr')
				
				for(let i=1;i<trs.length;i++){
					if(trs[i].getElementsByTagName('td')[1].innerText == name){
						trs[i].getElementsByTagName('td')[4].getElementsByTagName('input')[1].value++
						var asd = trs[i].getElementsByTagName('td')[4].getElementsByTagName('input')[1].value		
						var xiaoJi = trs[i].getElementsByTagName('td')[5].innerText
						xiaoJi = asd * price
						trs[i].getElementsByTagName('td')[5].innerText = xiaoJi
						total()
						return;
					}
				}
				var tbody = document.getElementById("tbd");
				//创建tr
				var trEl = document.createElement("tr");
				//创建td
				var trEl1 = document.createElement("td");
				var trEl2 = document.createElement("td");
				var trEl3 = document.createElement("td");
				var trEl4 = document.createElement("td");
				var trEl5 = document.createElement("td");
				var trEl6 = document.createElement("td");
				var trEl7 = document.createElement("td");
				//添加内容到td
				trEl1.innerHTML = "<input type='checkbox' class='cnome'/>" 
				trEl2.innerHTML = name;
				trEl3.innerHTML = "<span id='sp1'>" + price + "</span>";
				trEl4.innerHTML = currentTime;
				trEl5.innerHTML =
					"<input type='button' value='+' onclick='sum(this)'/><input id='number' type='number' value='1'/><input type='button' value='-' onclick='sub(this)'/>";
				trEl6.innerHTML = "<span id='sp2'>" + price + "</span>"
				trEl7.innerHTML = "<input id='del' type='button' value='删除' onclick='del()'/>";
				//添加内容到tr
				trEl.appendChild(trEl1);
				trEl.appendChild(trEl2);
				trEl.appendChild(trEl3);
				trEl.appendChild(trEl4);
				trEl.appendChild(trEl5);
				trEl.appendChild(trEl6);
				trEl.appendChild(trEl7);
				//添加内容到tbody
				tbody.appendChild(trEl);
				total()
			}
			//删除
			function del() {
				if (confirm("确认删除当前行?")) {
					// this.parentNode.parentNode.remove()
					$("#del").closest("tr").remove()
					document.getElementById("total").innerHTML = total()
				}
			}

			//增加数量
			function sum(btn) {
				var tr = btn.parentNode.parentNode
				var tds = tr.getElementsByTagName('td')
				var i = document.getElementById("number").value;
				var i = tds[4].getElementsByTagName('input')[1].value
				i++;
				tds[4].getElementsByTagName('input')[1].value = i;
				var price = parseFloat(tds[2].innerText)
				console.log(price)
				var xiaoJi = parseFloat(tds[5].innerText)
				console.log(xiaoJi)
				xiaoJi = i * price
				tds[5].innerText = xiaoJi
				
				total();
			}
			//减少数量
			function sub(btn) {
				var tr = btn.parentNode.parentNode
				var tds = tr.getElementsByTagName('td')
				var i = tds[4].getElementsByTagName('input')[1].value
				if (i > 1) {
					i--;
					tds[4].getElementsByTagName('input')[1].value = i;
				}else{
					alert("不能小于1")
				}
				var price = parseFloat(tds[2].innerText)
				console.log(price)
				var xiaoJi = parseFloat(tds[5].innerText)
				console.log(xiaoJi)
				xiaoJi = i * price
				tds[5].innerText = xiaoJi
				console.log(xiaoJi)
				
				total();
			}
			//总计
			function total() {
				var trs = document.getElementsByTagName('table')[1].getElementsByTagName('tr')
				var sum = 0
				for (let i = 1; i < trs.length - 1; i++) {
					sum += parseFloat(trs[i].getElementsByTagName('td')[5].innerText)
				}
				document.getElementById('total').innerText = sum
				return sum;
			}
		</script>
	</head>
	<body>
		<h1 align="center">图书管理系统</h1>
		<table id="book"  cellpadding="0px" cellspacing="0px" width="700px" height="300px" align="center">
			<tr>
				<th>书名</th>
				<th>作者</th>
				<th>出版时间</th>
				<th>价格</th>
				<th>类型</th>
				<th>操作</th>
			</tr>
			<tr>
				<td id="name1">css布局实录</td>
				<td>李超</td>
				<td>2007-01-10</td>
				<td id="price1">11</td>
				<td>CSS</td>
				<td><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  onclick="tj1(this,1)">添加</a></td>
			</tr>
			<tr>
				<td id="name2">精通web</td>
				<td>张三</td>
				<td>2008-01-10</td>
				<td id="price2">11</td>
				<td>WEB</td>
				<td><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  onclick="tj1(this,2)">添加</a></td>
			</tr>
			<tr>
				<td id="name3">优美的HTML</td>
				<td>赵四</td>
				<td>2009-01-10</td>
				<td id="price3">12</td>
				<td>HTML</td>
				<td><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  onclick="tj1(this,3)">添加</a></td>
			</tr>
			<tr>
				<td id="name4">简单的JavaScript</td>
				<td>吴六</td>
				<td>2010-01-10</td>
				<td id="price4">15</td>
				<td>JavaScript</td>
				<td><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  onclick="tj1(this,4)">添加</a></td>
			</tr>
			<tr>
				<td id="name5">轻便的Jquery</td>
				<td>刘柳</td>
				<td>2011-01-10</td>
				<td id="price5">18</td>
				<td>Jquery</td>
				<td><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  onclick="tj1(this,5)">添加</a></td>
			</tr>
			<tr>
				<td id="name6">java入门</td>
				<td>戚七</td>
				<td>2012-01-10</td>
				<td id="price6">25</td>
				<td>java</td>
				<td><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  onclick="tj1(this,6)">添加</a></td>
			</tr>
			<tr>
				<td id="name7">WEB开发基础</td>
				<td>小红超</td>
				<td>2013-01-10</td>
				<td id="price7">35</td>
				<td>WEB</td>
				<td><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  onclick="tj1(this,7)">添加</a></td>
			</tr>
			<tr>
				<td id="name8">赢在客户</td>
				<td>大黄</td>
				<td>2014-01-10</td>
				<td id="price8">55</td>
				<td>阅文</td>
				<td><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  onclick="tj1(this,8)">添加</a></td>
			</tr>
		</table>

		<h1 align="center">购物车</h1>
		<table id="shopping"  cellpadding="0px" cellspacing="0px" width="700px" align="center">
			<tr>
				<th><input type="checkbox"></th>
				<th>书名</th>
				<th>价格</th>
				<th>添加时间</th>
				<th>数量</th>
				<th>小计</th>
				<th>操作</th>
			</tr>
			<tbody id="tbd">

			</tbody>
			<tr>
				<td colspan="5"></td>
				<td >总计:</td>
				<td id="total"></td>
			</tr>
		</table>
	</body>
</html>