项目一：水果库存静态页面展示

最新推荐文章于 2024-03-19 15:14:55 发布

java塑造中...

最新推荐文章于 2024-03-19 15:14:55 发布

阅读量197

点赞数

分类专栏： javaWeb 文章标签： javascript

本文链接：https://blog.csdn.net/m0_61454947/article/details/124109611

版权

javaWeb 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

分三个文件来写：

html用来写要展示的东西

css对字体大小颜色，表格框架进行调整，对层的大小进行调整

js绑定事件，完善功能

html

<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/demo05.css">
		<script type="text/javascript" src="js/demo09.js"></script>
	</head>
	<body>
		<div id="div_container">
			<div id="div_fruit_list">
				<table id="tbl_fruit">
					<tr>
						<th class="w20">名称</th>
						<th class="w20">单价</th>
						<th class="w20">数量</th>
						<th class="w20">小计</th>
						<th>操作</th>
					</tr>
					<tr>
						<td>苹果</td>
						<td>5</td>
						<td>20</td>
						<td>100</td>
						<td><img src="imgs/del.jpg" class="delImg"/></td>
					</tr>
					<tr>	
						<td>西瓜</td>
						<td>3</td>
						<td>20</td>
						<td>60</td>
						<td><img src="imgs/del.jpg" class="delImg"/></td>
					</tr>
					<tr>
						<td>菠萝</td>
						<td>4</td>
						<td>25</td>
						<td>100</td>
						<td><img src="imgs/del.jpg" class="delImg"/></td>
					</tr>
					<tr>
						<td>榴莲</td>
						<td>3</td>
						<td>30</td>
						<td>90</td>
						<td><img src="imgs/del.jpg" class="delImg"/></td>
					</tr>
					<tr>
						<td>总计</td>
						<td colspan="4">999</td>
					</tr>
				</table>
				
				<hr/>
				
				<div id="add_fruit_div">
					<table id="add_fruit_tbl">
						<tr>
							<td class="w30">名称：</td>
							<td><input class="input" type='text' id='fname' /></td>
						</tr>
						
						<tr>
							<td>单价：</td>
							<td><input class="input" type='text' id='price' /></td>
						</tr>
						
						<tr>
							<td>数量：</td>
							<td><input class="input" type='text' id='fcount' /></td>
						</tr>
						<tr>
							<th colspan="2">
								<input type='button' id="addBtn" class="btn" value="添加"/>
								<input type='button' class="btn" value="重填"/>
							</th>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</body>
</html>

css

*{
	color: 000000;
}

body{
	margin:0;
	padding:0;
	background-color:#808080;
}

div{
	position:relative;
	float:left;
}

#div_container{
	width:80%;
	height:100%;
	border:0px solid blue;
	margin-left:10%;
	float:left;
	background-color: honeydew;
	border-radius:8px;/*四个角变圆滑*/
}

#div_fruit_list{
	width:100%;
	border:0px solid red;
}

#tbl_fruit{
	width:60%;
	line-height:35px;/*行高*/
	margin-top:100px;
	margin-left:20%;
}

#tbl_fruit , #tbl_fruit tr , #tbl_fruit th , #tbl_fruit td{
	border:1px solid gray;
	border-collapse:collapse;/*单元格之间空隙置为0*/
	text-align:center;/*单元格内部文字居中*/
	font-size:16px;/*字体大小*/
	font-family:"黑体";
	font-weight:lighter;/*字体粗细*/
}


#add_fruit_div{
	border:0px solid red;
	width:40%;
	margin-left:30%;
}

#add_fruit_tbl {
	margin-top:32px;
	width:80%;
	margin-left:10%;
	border-collapse:collapse;
}

#add_fruit_tbl , #add_fruit_tbl tr , #add_fruit_tbl td{
	border:1px solid lightgray;
	text-align:center;
	line-height:28px;
}

.w20{
	width:20%;
}

.delImg{
	width:24px;
	height:24px;
}

.btn{
	border:1px solid lightgray;
	width:80px;
	height:24px;
}
.w30{
	width:30%;
}

.input{
	padding-left:4px;
	border:1px solid lightgray;
	width:90%;
}

js



window.onload=function(){
	updateZJ();
	//当页面加载完成，我们需要绑定各种事件
	//根据id获取到表格
	var fruitTbl =  document.getElementById("tbl_fruit");
	//获取表格中的所有的行
	var rows = fruitTbl.rows ;
	for(var i = 1 ; i<rows.length-1 ; i++){
		var tr = rows[i];
		trBindEvent(tr);
	}

	document.getElementById("addBtn").onclick=addFruit;
}

function trBindEvent(tr){
	//1.绑定鼠标悬浮以及离开时设置背景颜色事件
		tr.onmouseover=showBGColor;
		tr.onmouseout=clearBGColor;
		//获取tr这一行的所有单元格
		var cells = tr.cells;
		var priceTD = cells[1];
		//2.绑定鼠标悬浮在单价单元格变手势的事件
		priceTD.onmouseover = showHand ;
		//3.绑定鼠标点击单价单元格的事件
		priceTD.onclick=editPrice;


		//7.绑定删除小图标的点击事件
		var img = cells[4].firstChild;
		if(img && img.tagName=="IMG"){//获得元素的标签名
			//绑定单击事件
			img.onclick = delFruit ;
		}
}

//添加水果信息
function addFruit(){
	var fname = document.getElementById("fname").value;
	var price = parseInt(document.getElementById("price").value);
	var fcount = parseInt(document.getElementById("fcount").value);
	var xj = price * fcount ;

	var fruitTbl =  document.getElementById("tbl_fruit");
	var tr = fruitTbl.insertRow(fruitTbl.rows.length-1);
	var fnameTD = tr.insertCell();
	fnameTD.innerText = fname ;

	var priceTD = tr.insertCell();
	priceTD.innerText = price ;

	var fcountTD = tr.insertCell();
	fcountTD.innerText = fcount ;

	var xjTD = tr.insertCell();
	xjTD.innerText = xj ;

	var imgTD = tr.insertCell();
	imgTD.innerHTML = "<img src='imgs/del.jpg' class='delImg'/>";

	updateZJ();

	trBindEvent(tr);

}

function delFruit(){
	if(event && event.srcElement && event.srcElement.tagName=="IMG"){
		//alert表示弹出一个对话框，只有确定按钮
		//confirm表示弹出一个对话框，有确定和取消按钮。当点击确定，返回true，否则返回false
		if(window.confirm("是否确认删除当前库存记录")){
			var img = event.srcElement ;
			var tr = img.parentElement.parentElement ;
			var fruitTbl = document.getElementById("tbl_fruit");
			fruitTbl.deleteRow(tr.rowIndex);

			updateZJ();
		}
	}

}

//当鼠标点击单价单元格时进行价格编辑
function editPrice(){
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
		var priceTD = event.srcElement ;
		//目的是判断当前priceTD有子节点，而且第一个子节点是文本节点 ， TextNode对应的是3  ElementNode对应的是1
		if(priceTD.firstChild && priceTD.firstChild.nodeType==3){
			//innerText 表示设置或者获取当前节点的内部文本
			var oldPrice = priceTD.innerText ;
			//innerHTML 表示设置当前节点的内部HTML
			priceTD.innerHTML="<input type='text' size='4'/>";
			// <td><input type='text' size='4'/></td>
			var input = priceTD.firstChild;
			if(input.tagName=="INPUT"){
				input.value = oldPrice ;
				//选中输入框内部的文本
				input.select();
				//4.绑定输入框失去焦点事件 , 失去焦点，更新单价
				input.onblur=updatePrice ;

				//8.在输入框上绑定键盘摁下的事件，此处我需要保证用户输入的是数字
				input.onkeydown=ckInput;
			}
		}
		
	}
}

//检验键盘摁下的值的方法
function ckInput(){
	var kc = event.keyCode ;
	// 0 ~ 9 : 48~57
	//backspace : 8
	//enter : 13
	//console.log(kc);

	if(!( ( kc>=48 && kc<=57 ) || kc==8 || kc==13 )){
		event.returnValue=false;
	}

	if(kc==13){
		event.srcElement.blur();
	}

}

//更新单价的方法
function updatePrice(){
	if(event && event.srcElement && event.srcElement.tagName=="INPUT"){
		var input = event.srcElement ;
		var newPrice = input.value ;
		//input节点的父节点是td
		var priceTD = input.parentElement ;
		priceTD.innerText = newPrice ;

		//5. 更新当前行的小计这一个格子的值
		//priceTD.parentElement td的父元素是tr
		updateXJ(priceTD.parentElement);

	}
}

//更新指定行的小计
function updateXJ(tr){
	if(tr && tr.tagName=="TR"){
		var tds = tr.cells;
		var price = tds[1].innerText ;
		var count = tds[2].innerText ;
		//innerText获取到的值的类型是字符串类型，因此需要类型转换，才能进行数学运算
		var xj = parseInt(price) * parseInt(count);
		tds[3].innerText = xj ;

		//6. 更新总计
		updateZJ();
	}

}

//更新总计
function updateZJ(){
	var fruitTbl = document.getElementById("tbl_fruit");
	var rows = fruitTbl.rows ;
	var sum = 0 ;
	for(var i = 1; i<rows.length-1 ; i++){
		var tr = rows[i];
		var xj = parseInt(tr.cells[3].innerText);		//NaN    not a number 不是一个数字
		sum = sum + xj ;
	}
	rows[rows.length-1].cells[1].innerText = sum ;
}


//当鼠标悬浮时，显示背景颜色
function showBGColor(){
	//event : 当前发生的事件
	//event.srcElement : 事件源
	//alert(event.srcElement);
	//alert(event.srcElement.tagName);	--> TD
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
		var td = event.srcElement ;
		//td.parentElement 表示获取td的父元素 -> TR
		var tr = td.parentElement ;
		//如果想要通过js代码设置某节点的样式，则需要加上 .style
		tr.style.backgroundColor = "blue" ;

		//tr.cells表示获取这个tr中的所有的单元格
		var tds = tr.cells;
		for(var i = 0 ; i<tds.length ; i++){
			tds[i].style.color="white";
		}
	}
}

//当鼠标离开时，恢复原始样式
function clearBGColor(){
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
		var td = event.srcElement ;
		var tr = td.parentElement ;
		tr.style.backgroundColor="transparent";
		var tds = tr.cells;
		for(var i = 0 ; i<tds.length ; i++){
			tds[i].style.color="threeddarkshadow";
		}
	}
}

//当鼠标悬浮在单价单元格时，显示手势
function showHand(){
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
		var td = event.srcElement ;
		//cursor : 光标
		td.style.cursor="hand";
	}

}

java塑造中...

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
项目一：水果库存静态页面展示

分三个文件来写：html用来写要展示的东西css对字体大小颜色，表格框架进行调整，对层的大小进行调整js绑定事件，完善功能html<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/demo05.css"> <script type="text/javascript" src="js/demo09.js"></scri.
复制链接

扫一扫