JavaScript，水果购物车，JavaScript实现html页面增加，删除，修改单价

本文链接：https://blog.youkuaiyun.com/zzysdfsdfa/article/details/124180658

这篇博客介绍了一位初学者如何使用JavaScript实现HTML页面上的水果购物车功能，包括添加、删除、修改单价以及修复文本框只能输入数字的bug。通过尚硅谷的2022JavaWeb教程，博主详细讲解了每个步骤，如使用鼠标事件改变表格行颜色，单价输入框的显示和失去焦点后的单价更改，以及添加和删除行的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

eg.水果购物车项目

大家好，这里是从头开始学java的一名初学者程序员，我会把我自己学习过程中做的所有笔记，和用来练习的项目代码整理到git上面，学习Java笔记与代码，欢迎大家交流查看。

尚硅谷的2022javaweb教程，Html+css+JavaScript做一个水果小票购物车，完成添加，删除，修改单价操作。

尚硅谷丨2022版JavaWeb教程
目前只看到p17，更新第一部分内容笔记与代码，与遇到的问题

使用鼠标事件实现表格行变色

window.onload=function(){
   
   
	//通过id获取到表格
	var fruitTbl=document.getElementById("tbl_fruit");
	var rows=fruitTbl.rows;//获取表格中的所有行
	for(var i=0;i<rows.length;i++){
   
   
		var tr=rows[i];
		tr.onmouseover=showColor;//指绑定这个事件，没有小括号
		tr.onmouseout=clearColor;
	}
}
function showColor () {
   
   
	// event当前事件
	// srcElement事件源
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
   
   
		var td=event.srcElement;
		var tr=td.parentElement;//表示获取td的父元素tr
		//用.style来设置某某的样式属性
		tr.style.backgroundColor="aquamarine"
	}
	
}

function clearColor(){
   
   
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
   
   
		var td=event.srcElement;
		var tr=td.parentElement;//表示获取td的父元素tr
		tr.style.backgroundColor="transparent";
		
	}
}

点一下单价出现输入框

function editPrice(){
   
   
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
   
   
		var priceTD=event.srcElement;
		//获取节点的内部文本
		var oldprice=priceTD.innerText;
		//任何一个节点有一个方法属性
		//表示设置当前节点的内部附上一段html代码
		priceTD.innerHTML="<input type='text' size='4' />";
		var input=priceTD.firstChild;
		if(input.tagName=="INPUT"){
   
   
			input.value=oldprice;
		}
		
	}
}

问题是，如果点到输入框外面，就会再获取一次，再获取的话，没有东西了，点第二遍就会有错。

解决方法，可以做个判断，判断一下要是读到个文本节点，才做这些事情

接下来做失去焦点，实现更改单价的功能，在单价框中输入单价后，可以更改单价。

更改小计和总计

//点击单元格时变成输入框
function editPrice() {
   
   
	if (event && event.srcElement && event.srcElement.tagName == "TD") {
   
   
		var priceTD = event.srcElement;
		if (priceTD.firstChild.nodeType == 3) //判断一下要是读到个文本节点，才做这些事情
		{
   
   
			//获取节点的内部文本
			var oldprice = priceTD.innerText;
			//任何一个节点有一个方法属性
			//表示设置当前节点的内部附上一段html代码
			priceTD.innerHTML = "<input type='text' size='1' />";
			var input = priceTD.firstChild;
			if (input.tagName == "INPUT") {
   
   
				input.value = oldprice;
				//选中内部的文本
				input.select();
				//然后用这个文本更新单元格，这里原理是失去焦点以后做的事
				input.onblur=updatePrice;
				input.onkeydown=checkInput;
			}

		}

	}
}
function checkInput()//检验键盘按下的事件
{
   
   
	var kc=event.keyCode;
	
	console.</