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