JavaWeb学习笔记（三）—— JavaScript

最新推荐文章于 2022-09-09 18:38:41 发布

kxttmx

最新推荐文章于 2022-09-09 18:38:41 发布

阅读量1.8k

点赞数 1

分类专栏： JavaWeb学习笔记（尚硅谷2022版）文章标签： idea java-ee java

本文链接：https://blog.csdn.net/kuaixiao0217/article/details/124333526

版权

JavaWeb学习笔记（尚硅谷2022版）专栏收录该内容

36 篇文章 6 订阅

订阅专栏

本文详细介绍了JavaScript在网页中的应用，包括定义变量、函数，事件处理，DOM操作，以及如何实现实时的价格修改、删除行、添加数据和输入验证。通过实例演示了如何结合HTML和CSS构建动态价格表，并提供了完整的代码示例。

摘要由CSDN通过智能技术生成

03、JavaScript

3.1、JavaScript介绍

1、JavaScript：是客户端（浏览器端）运行的脚本语言，语法风格和java比较类似。

2、JS是一门弱类型的语言，变量的数据类型由后面赋的值的类型决定。

3.2、JavaScript 和 html 代码的结合方式

1、第一种方式：

只需要在 head 标签中，或者在 body 标签中，使用 script 标签来书写 JavaScript 代码。

<script language="JavaScript">
        //String str = "hello world";
        
        var str = "hello world!";
        alert(typeof str);
        str = 9999;
        alert(typeof str);       
</script>

2、第二种方式：

使用 script 标签引入单独的 JavaScript 代码文件

<script type="text/javascript" src="js/demo05.js">

3.3、基本数据类型

数值型：JavaScript不区分整数、小数
字符串：JavaScript不区分字符、字符串；单引号、双引号意思一样。
布尔型：true、false
- 在JavaScript中，其他类型和布尔类型的自动转换
- true：非零的数值，非空字符串，非空对象
- false：零、空字符串，null，undefined

引用类型：

所有new出来的对象

<script language="JavaScript">
        var person = new Object();
        person.pid = "p001";
        person.pname = "wjk";
        alert(person.pid + "_" + person.pname);
    </script>

用[]声明的数组
用{}声明的对象

3.4、变量

变量：变量是可以存放某些值的内存的命名。
关键字：var
数据类型：JavaScript变量可以接收任意类型的数据。
标识符：严格区分大小写
变量使用规则：
- 如果使用了一个没有声明的变量，那么会在运行时报错。
- 如果声明一个变量没有初始化，那么这个变量的值就是undefined。
JS中的定义变量的格式：
```
var 变量名;
var 变量名 = 值;
```

3.5、函数

1、第一种定义方式：

使用的格式如下:

function 函数名(形参列表){
    函数体
}

问：在 JavaScript 语言中，如何定义带有返回值的函数？

只需要在函数体内直接使用 return 语句返回值即可。

2、第二种定义方式：

使用格式如下：

var 函数名 = function(形参列表) { 
    函数体
}

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var fun = function () {
            alert("无参函数");
        }
        // fun();
        var fun2 = function (a,b) {
            alert("有参函数 a=" + a + ",b=" + b);
        }
        // fun2(1,2);
        var fun3 = function (num1,num2) {
            return num1 + num2;
        }
        alert( fun3(100,200) );
    </script>
</head>
<body>
</body>
</html>

注意：在 Java 中函数允许重载。但是在 JS 中函数的重载会直接覆盖掉上一次的定义。

3.6、JS 中的事件

1、事件：事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

2、常用的事件：

onload 加载完成事件：页面加载完成之后，常用于做页面 js 代码初始化操作。
onclick 单击事件：常用于按钮的点击响应操作。
onblur 失去焦点事件：常用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法。

3.7、Document对象中的方法介绍

document.getElementById(elementId) ：通过标签的 id 属性查找标签 dom 对象，elementId 是标签的id属性值
document.getElementsByName(elementName) ：通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
document.getElementsByTagName(tagname) ：通过标签名查找标签 dom 对象。tagname 是标签名。
document.createElement(tagName) ：通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名。

3.8、节点的常用属性

childNodes 属性，获取当前节点的所有子节点
firstChild 属性，获取当前节点的第一个子节点
lastChild 属性，获取当前节点的最后一个子节点
parentNode 属性，获取当前节点的父节点
nextSibling 属性，获取当前节点的下一个节点
previousSibling 属性，获取当前节点的上一个节点
className 用于获取或设置标签的class属性值
innerHTML 属性，表示获取/设置起始标签和结束标签中的内容
innerText 属性，表示获取/设置起始标签和结束标签中的文本

3.9、JS实现相关操作

3.9.1、鼠标悬浮和离开

1、【demo07.html】

<html>
<head>
    <link rel="stylesheet" href="css/demo05.css">
	<script type="text/javascript" src="js/demo07.js">
	</script>
</head>
<body>
    <div id="div_container">
        <div id="div_fruit_list">
			<table id="tb1_fruit">
				<tr>
					<th class="w20">名称</th>
					<th class="w20">单价</th>
					<th class="w20">数量</th>
					<th class="w20">小计</th>
					<th>操作</th>
				</tr>
				<tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
					<td>苹果</td>
					<td onmouseover="showHand()">5</td>
					<td>20</td>
					<td>100</td>
					<td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td>
				</tr>
				<tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
					<td>西瓜</td>
					<td onmouseover="showHand()">3</td>
					<td>20</td>
					<td>60</td>
					<td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td>
				</tr>
				<tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
					<td>菠萝</td>
					<td onmouseover="showHand()">4</td>
					<td>25</td>
					<td>100</td>
					<td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td>
				</tr>
				<tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
					<td>榴莲</td>
					<td onmouseover="showHand()">3</td>
					<td>30</td>
					<td>90</td>
					<td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td>
				</tr>
				<tr>
					<td>总计</td>
					<td colspan="4">999</td>
				</tr>
			</table>
        </div>
    </div>
</body>
</html>

【demo05.css】

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:25px;
}
#div_fruit_list{
    width:100%;
	border:0px solid red;
}
#tbl_fruit{
    /*设置表格宽度：页面宽度的60%*/
	width:60%;
	/*设置每行单元格高度*/
	line-height:28px;
	/*设置表格和页面边框上方的距离*/
	margin-top:120px;
	/*设置表格和页面边框左边的距离*/
	margin-left:20%;
}
#tbl_fruit, #tbl_fruit tr,#tbl_fruit th,#tbl_fruit td{
    border:1px solid gray;
    /*单元格边界合并*/
	border-collapse:collapse;
    /*单元格文字居中*/
	text-align:center;
    /*设置单元格文字样式*/
	font-size:16px;
	font-family:"楷体";
	font-weight:lighter;
	color:threeddarkshadow;
}
.w20{
    width:20%;
}
.deleteImg{
    width:24px;
	height:24px;
}

【demo07.js】

//当鼠标悬浮时，显示背景颜色
function showBGColor(){
    //event:当前发生的事件
	//event.srcElement:事件源
	//alert(event.srcElement);
	//显示事件源的标签名：tr, td, th
	//alert(event.srcElement.tagName); //显示TD

	if(event && event.srcElement && event.srcElement.tagName == "TD") {
		//1、取选中的单元格
		var td = event.srcElement;
		//td.parentElement表示获取td的父元素 TR
		//2、取选中的单元格所在的单元行，并对此单元行进行操作
		var tr = td.parentElement;
		//如果想要通过js代码设置某节点的样式，则需要加上.style
		//3、设置了选中行的背景颜色
		tr.style.backgroundColor = "pink";
		//tr.cells表示获取这个tr中的所有的单元格
		var tds = tr.cells;
		//4、设置选中这行的单元格里的文字颜色
		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";
	}
}

2、优化代码：

【demo08.html】

<html>
<head>
    <link rel="stylesheet" href="css/demo05.css">
	<script type="text/javascript" src="js/demo08.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/deleteIcon.jpg" class="deleteImg"/></td>
				</tr>
				<tr>
					<td>西瓜</td>
					<td>3</td>
					<td>20</td>
					<td>60</td>
					<td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td>
				</tr>
				<tr>
					<td>菠萝</td>
					<td>4</td>
					<td>25</td>
					<td>100</td>
					<td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td>
				</tr>
				<tr>
					<td>榴莲</td>
					<td>3</td>
					<td>30</td>
					<td>90</td>
					<td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td>
				</tr>
				<tr>
					<td>总计</td>
					<td colspan="4">999</td>
				</tr>
			</table>
        </div>
    </div>
</body>
</html>

【demo08.js】

window.onload=function(){
	//当页面加载完成，我们需要绑定各种事件
	//根据id获取到表格
	var fruitTbl = document.getElementById("tbl_fruit");
	//获取表格中所有行(tr)
	var rows = fruitTbl.rows;
	for(var i = 0; i < rows.length; i++) {
		var tr = rows[i];
		//1.绑定鼠标悬浮及离开时设置背景颜色
		tr.onmouseover = showBGColor;//注意：没有();若有(),则代表当场调用这个方法，并且将这个方法的返回值返回给变量
		tr.onmouseout = clearBGColor;
		//获取tr这一行所有的单元格
		var cells = tr.cells;
		//获取单价单元格
		var priceTD = cells[1];
		//2.绑定鼠标悬浮在单价单元格变手势的事件
		priceTD.onmouseover = showHand;
	}
}

//当鼠标悬浮时，显示背景颜色
function showBGColor(){

    //event:当前发生的事件
	//event.srcElement:事件源
	//alert(event.srcElement);
	//显示事件源的标签名：tr, td, th
	//alert(event.srcElement.tagName); //显示TD
	if(event && event.srcElement && event.srcElement.tagName == "TD") {
		//1、取选中的单元格
		var td = event.srcElement;
		//td.parentElement表示获取td的父元素 TR
		//2、取选中的单元格所在的单元行，并对此单元行进行操作
		var tr = td.parentElement;
		//如果想要通过js代码设置某节点的样式，则需要加上.style
		//3、设置了选中行的背景颜色
		tr.style.backgroundColor = "pink";
		//tr.cells表示获取这个tr中的所有的单元格
		var tds = tr.cells;
		//4、设置选中这行的单元格里的文字颜色
		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";

	}
}

3.9.2、修改价格表中单价，自动修改小计和总计

在这里插入图片描述

【demo08.js】

window.onload=function(){
	updateAllSum();
	//当页面加载完成，我们需要绑定各种事件
	//根据id获取到表格
	var fruitTbl = document.getElementById("tbl_fruit");
	//获取表格中所有行(tr)
	var rows = fruitTbl.rows;
	//去掉表头和总计那两行
	for(var i = 1; i < rows.length-1; i++) {
		var tr = rows[i];
		//获取tr这一行所有的单元格
		var cells = tr.cells;
		//获取单价单元格
		var priceTD = cells[1];
		//3.绑定鼠标点击单价单元格的事件
		priceTD.onclick = editPrice;
	}
}

//当鼠标点击单价单元格时进行价格编辑
function editPrice(){
	if(event && event.srcElement && event.srcElement.tagName == "TD") {
		var priceTD = event.srcElement;
		//判断当前priceTD有子节点，而且第一个子节点是文本节点
        //TextNode对应的节点类型为3， Element对应的节点类型为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;

		    }
		}		
	}
}

//修改价格
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;

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

//更新指定行的小计
function updateRowSum(tr){
	if(tr && tr.tagName == "TR") {
		//获取所有单元格
		var tds = tr.cells;
		//获取当前行的单价
		var price = tds[1].innerText;
		//获取当前行的数量
		var count = tds[2].innerText;
		//innerText获取到的值的类型为字符串类型，因此需要类型转换，才能进行数学运算
		var rowSum = parseInt(price) * parseInt(count);
		tds[3].innerText = rowSum;

		//更新总计
		updateAllSum();
	}
}

//更新总计
function updateAllSum(){
	//根据id获取到表格
	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 rowSum = parseInt(tr.cells[3].innerText);//NaN: not a number 不是一个数字
		sum = sum + rowSum; 
	}
	rows[rows.length-1].cells[1].innerText = sum;

}

3.9.3、删除表中的一行

【demo08.js】

window.onload=function(){
	updateAllSum();
	//当页面加载完成，我们需要绑定各种事件
	//根据id获取到表格
	var fruitTbl = document.getElementById("tbl_fruit");
	//获取表格中所有行(tr)
	var rows = fruitTbl.rows;
	//去掉表头和总计那两行
	for(var i = 1; i < rows.length-1; i++) {
		var tr = rows[i];
		//获取tr这一行所有的单元格
		var cells = tr.cells;

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

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

			updateAllSum();
		}
	}
}

//更新总计
function updateAllSum(){
	//根据id获取到表格
	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 rowSum = parseInt(tr.cells[3].innerText);//NaN: not a number 不是一个数字
		sum = sum + rowSum; 
	}
	rows[rows.length-1].cells[1].innerText = sum;
}

3.9.4、检验键盘按下的值的方法

【demo08.js】

//当鼠标点击单价单元格时进行价格编辑
function editPrice(){
	if(event && event.srcElement && event.srcElement.tagName == "TD") {
		var priceTD = event.srcElement;
		//判断当前priceTD有子节点，而且第一个子节点是文本节点
        //TextNode对应的节点类型为3， Element对应的节点类型为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 = checkInput;
		    }
		}		
	}
}

//检验键盘按下的值的方法
function checkInput(){
	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();
	}
}

3.9.5、添加数据

【demo09.html】

<html>
<head>   
    <title>Title</title>
    <link rel="stylesheet" href="css/demo09.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/deleteIcon.jpg" class="deleteImg"/></td>
				</tr>
				<tr>
					<td>西瓜</td>
					<td>3</td>
					<td>20</td>
					<td>60</td>
					<td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td>
				</tr>
				<tr>
					<td>菠萝</td>
					<td>4</td>
					<td>25</td>
					<td>100</td>
					<td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td>
				</tr>
				<tr>
					<td>榴莲</td>
					<td>3</td>
					<td>30</td>
					<td>90</td>
					<td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td>
				</tr>
				<tr>
					<td>总计</td>
					<td colspan="4">999</td>
				</tr>
			</table>
			<hr/>
			<div id="add_friut_div">
			    <table id="add_friut_table">
				   <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="count"/></td>
				   </tr>
				   <tr>
					   <th colspan="2">
					       <input type="button" id="addBtn"class="btn" value="添加"/>
						   <input type="reset" class="btn" value="重置"/>
					   </th>
				   </tr>
				</table>
			</div>
        </div>
    </div>
</body>
</html>

【demo09.css】

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:25px;
}
#div_fruit_list{
    width:100%;
	border:0px solid red;
}
#tbl_fruit{
    /*设置表格宽度：页面宽度的60%*/
	width:60%;
	/*设置每行单元格高度*/
	line-height:28px;
	/*设置表格和页面边框上方的距离*/
	margin-top:120px;
	/*设置表格和页面边框左边的距离*/
	margin-left:20%;
}
#tbl_fruit, #tbl_fruit tr,#tbl_fruit th,#tbl_fruit td{
    border:1px solid gray;
    /*单元格边界合并*/
	border-collapse:collapse;
    /*单元格文字居中*/
	text-align:center;
    /*设置单元格文字样式*/
	font-size:16px;
	font-family:"楷体";
	font-weight:lighter;
	color:threeddarkshadow;
}
.w20{
    width:20%;
}
.deleteImg{
    width:24px;
	height:24px;
}

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

}

#add_friut_table{

    margin-top:32px;
	width:80%;
	/*设置每行单元格高度*/
	line-height:28px;
	
	margin-left:10%;
	/*单元格边界合并*/
	border-collapse:collapse;
	
}

#add_friut_table,#add_friut_table tr,#add_friut_table td{
    border:1px solid lightgrey;
	
	/*单元格文字居中*/
	text-align:center;
    /*设置单元格文字样式*/
	font-size:16px;
	font-family:"楷体";
	font-weight:lighter;
	color:threeddarkshadow;
}

.btn{
    border:1px solid lightgrey;
	width:100px;
}
.w30{
    width:30%;
}
.input{
    padding-left:4px;
    border:1px solid lightgrey;
	width:80%;
}

【demo09.js】

function $(id){
	return document.getElementById(id);
}

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

    $("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 = deleteFruit;
	}
}

//添加水果
function addFruit(){
	var fname = $("fname").value;
	var price = parseInt($("price").value);
	var count = parseInt($("count").value);
	var rowSum = price * count;

	var fruitTbl = $("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 countTD = tr.insertCell();
	countTD.innerText = count;
	
	var rowSumTD = tr.insertCell();
	rowSumTD.innerText = rowSum;
	
	var imgTD = tr.insertCell();
	imgTD.innerHTML = "<img src='imgs/deleteIcon.jpg' class='deleteImg'/>";

	updateAllSum();
	trBindEvent(tr);
}

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

			updateAllSum();
		}
	}
}

//当鼠标点击单价单元格时进行价格编辑
function editPrice(){
	if(event && event.srcElement && event.srcElement.tagName == "TD") {
		var priceTD = event.srcElement;
		//判断当前priceTD有子节点，而且第一个子节点是文本节点
        //TextNode对应的节点类型为3， Element对应的节点类型为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 = checkInput;

		    }
		}		
	}
}


//检验键盘按下的值的方法
function checkInput(){
	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
		updateRowSum(priceTD.parentElement);
	}
}

//更新指定行的小计
function updateRowSum(tr){
	if(tr && tr.tagName == "TR") {
		//获取所有单元格
		var tds = tr.cells;
		//获取当前行的单价
		var price = tds[1].innerText;
		//获取当前行的数量
		var count = tds[2].innerText;
		//innerText获取到的值的类型为字符串类型，因此需要类型转换，才能进行数学运算
		var rowSum = parseInt(price) * parseInt(count);
		tds[3].innerText = rowSum;

		//6.更新总计
		updateAllSum();

	}
}

//更新总计
function updateAllSum(){
	//根据id获取到表格
	var fruitTbl = $("tbl_fruit");
	var rows = fruitTbl.rows;
	var sum = 0;
	for(var i = 1; i < rows.length-1; i++){
		var tr = rows[i];
		var rowSum = parseInt(tr.cells[3].innerText);//NaN: not a number 不是一个数字
		sum = sum + rowSum; 
	}
	rows[rows.length-1].cells[1].innerText = sum;

}

//当鼠标悬浮时，显示背景颜色
function showBGColor(){

    //event:当前发生的事件
	//event.srcElement:事件源
	//alert(event.srcElement);
	//显示事件源的标签名：tr, td, th
	//alert(event.srcElement.tagName); //显示TD
	if(event && event.srcElement && event.srcElement.tagName == "TD") {
		//1、取选中的单元格
		var td = event.srcElement;
		//td.parentElement表示获取td的父元素 TR
		//2、取选中的单元格所在的单元行，并对此单元行进行操作
		var tr = td.parentElement;
		//如果想要通过js代码设置某节点的样式，则需要加上.style
		//3、设置了选中行的背景颜色
		tr.style.backgroundColor = "pink";
		//tr.cells表示获取这个tr中的所有的单元格
		var tds = tr.cells;
		//4、设置选中这行的单元格里的文字颜色
		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";

	}
}