水果库存(javaweb)(实现基本数据更改，删除)

最新推荐文章于 2022-11-09 11:49:56 发布

美式加冰

最新推荐文章于 2022-11-09 11:49:56 发布

阅读量507

点赞数

分类专栏： javaweb 文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_52351978/article/details/124357468

版权

javaweb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML代码

<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/demo1.css" charset="utf-8">
		<script type="text/javaScript" src="js/demo01.js"></script>
	</head>
	<body>
		<div id="div_container">
			<div id="div_fruit">
				<table id="tb_fruit">
					<tr>
						<th class="20w">名称</th>
						<th class="20w">单价</th>
						<th class="20w">数量</th>
						<th class="20w">总价</th>
						<th class="20w">操作</th>
					</tr>
					<tr>
						<td>苹果</td>
						<td>10</td>
						<td>10</td>
						<td>100</td>
						<td><img src="imgs/del.jpg" width=24px height=24px></td>
					</tr>
					<tr>
						<td>西瓜</td>
						<td>15</td>
						<td>5</td>
						<td>75</td>
						<td><img src="imgs/del.jpg" width=24px height=24px></td>
					</tr>
					<tr>
						<td>香蕉</td>
						<td>5</td>
						<td>5</td>
						<td>25</td>
						<td><img src="imgs/del.jpg" width=24px height=24px></td>
					</tr>
					<tr>
						<td>总计</td>
						<td colspan="4">200</td>
					</tr>
				</table>
			</div>
		</div>
	</body>
</html>

css代码

body{
	padding:0;
	/*margin:0;
	background-color:#808080;*/
}
/*设置所有div属性*/
div{
	position:relative;
	float:left;
}

#div_container{
	width:80%;
	height:100%;
	margin-left:10%;
	float:left;
}
#div_fruit{
	width:100%;
}
/*设置表格长度 距离顶部间距间隔百分之十 边框合并*/
#tb_fruit{
	width:100%;
	margin-top:10%;
	border-collapse:collapse;
}

/*设置表中每个标签有边框,边框合并,文本居中*/
#tb_fruit tr,#tb_fruit td,#tb_fruit th{
	border:1px solid gray;
	border-collapse:collapse;
	text-align:center;
}

/*设置单个元素长度*/
.20w{
	width:20%;
}

js代码

window.onload=function(){
	var fruit=document.getElementById("tb_fruit");//通过id拿到表格
	var rows=fruit.rows;//以数组形式拿到表格中的每行
	for(var i=1;i<rows.length-1;i++){
		var tr=rows[i];//tr承载每行
		tr.onmouseover=showBgColor;//给tr添加鼠标悬浮事件
		tr.onmouseout=clearBgColor;//给tr添加鼠标移开事件
		var cells=tr.cells;//以数组形式拿到每行里的元素
		var priceId=cells[1];//priceId指向第二个元素(水果价格)
		var numberId=cells[2];//numberId指向第三个元素(水果数量)
		priceId.onmouseover=showHand;//给priceId添加鼠标悬浮事件
		priceId.onclick=changePrice;//给priceId添加鼠标点击事件
		var img=cells[4].firstChild;
		if(img&&img.tagName=="IMG"){
			img.onclick=delFruit;
		}
	}
}

//鼠标悬浮事件(改变背景颜色)
function showBgColor(){
	//判断事件,事件源是否存在,事件源是否为td
	if(event&&event.srcElement&&event.srcElement.tagName=="TD"){
		var td=event.srcElement;//td作为事件源
		var tr=td.parentElement;//tr指向td的父级
		tr.style.backgroundColor="navy";//tr的背景颜色改为navy色(如果要改变节点样式需要加上.style)
		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="black";
		}
	}
}

//鼠标悬浮事件(改变鼠标样子)
function showHand(){
	if(event&&event.srcElement&&event.srcElement.tagName=="TD"){
		var td=event.srcElement;//td作为事件源
		td.style.cursor="hand";//cursor(鼠标),将鼠标光标改为手指样式
	}
}

//鼠标点击事件(更改价格数据)
function changePrice(){
	if(event&&event.srcElement&&event.srcElement.tagName=="TD"){
		var priceId=event.srcElement;
		if(priceId.firstChild&&priceId.firstChild.nodeType==3){
			var oldPrice=priceId.innerText;//储存修改前的数据
			priceId.innerHTML="<input type='text' size='4'/>"//更改td的网页代码,显示为输入框
			var input=priceId.firstChild;//priceId的第一个节点也就是文本框
			if(input.tagName=="INPUT"){
				input.value=oldPrice;//使文本框的值为修改前数据
				input.select();//设置文本框选中效果
				input.onblur=updatePrice;//onblur(鼠标聚焦取消),给文本框设置鼠标取消聚焦事件(即离开区域)
			}
		}
	}
}

//鼠标聚焦取消事件(修改价格单价及总计价格)
function updatePrice(){
	if(event&&event.srcElement&&event.srcElement.tagName=="INPUT"){
		var input=event.srcElement;//事件源处于input
		var newPrice=input.value;//拿到最新的价格
		var inputTd=input.parentElement;//拿到input的父级td
		inputTd.innerHTML=newPrice;//更改td的网页代码,显示为最新的更改价格
		var inputTr=inputTd.parentElement;
		updateXj(inputTr);//调用方法updateXj,传入inputTr
	}
}
//更改总价内容
function updateXj(tr){
	if(tr&&tr.tagName=="TR"){
		//分割tr行,拿到水果单价和水果数量数据
		var tds=tr.cells;
		var prices=tds[1].innerText;
		var number=tds[2].innerText;
		var total=parseInt(prices)*parseInt(number);//得到新的水果总价
		tds[3].innerHTML=total;//更改td的网页代码,显示为最新的更改价格
		updateTotal();//调用undateTotal
	}
}

function updateTotal(){
	var fruit=document.getElementById("tb_fruit");//通过id拿到表格
	var trs=fruit.rows;//以数组形式拿到表格中的每行
	var total=0;
		for(var i=1;i<trs.length;i++){
			var td=trs[i].cells;
			if(i==trs.length-1){//当遍历到最后一行
				td[1].innerHTML=total;//更改td的网页代码,显示为最新的更改总价
				break;
			}
			total+=parseInt(td[3].innerText);//添加单个水果总价
		}
}

function delFruit(){
	if(event&&event.srcElement&&event.srcElement.tagName=="IMG"){
		if(window.confirm("是否删除元素")){//alert弹窗只有确定,confirm弹窗有确定和取消返回true和false
			var img=event.srcElement;
			var tr=img.parentElement.parentElement;
			var fruit=document.getElementById("tb_fruit");//通过id拿到表格
			fruit.deleteRow(tr.rowIndex);//flag.deleteRow(index)删除flag中第index+1行
										 //flag.rowIndex() 返回flag在父级排序中的下标
			updateTotal()//重新更新总价
		}
	}
}

结果