js的使用

最新推荐文章于 2023-09-13 17:30:17 发布

COWARD_LOVE1

最新推荐文章于 2023-09-13 17:30:17 发布

阅读量608

点赞数 1

分类专栏： javaweb 文章标签：大数据 javascript 前端

本文链接：https://blog.csdn.net/m0_71987537/article/details/125658959

版权

javaweb 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

目标

使用js来完成一些页面的简单事件绑定。

要求和知识点

1.鼠标悬浮在某一行时，背景颜色发生改变
   知识点：
       ①onmouseover 表示鼠标悬浮事件。
       ②使用事件="方法名()" 为组件绑定事件。
       ③event代表一个事件。
       ④event.srcElement代表发生事件的组件（存在事件传递的效果）。
       ⑤event.srcElement.tagName获取事件组件的名字。
       ⑥event.srcElement.parentElement代表发生事件的组件的父组件。
       ⑦对于表格的一行(tr)来说，使用tr.cells来获取这一行的所有列。
       ⑧使用组件.style.参数名来设置组件的样式。

   2.鼠标离开时，相应的行恢复原来状态
   知识点：
       ①onmouseout 表示鼠标离开事件。

   3.鼠标悬浮在单价单元格时，鼠标图案变成手的形状
   知识点：
       ①组件.style.cursor 用来设置鼠标图案。

   4.将js代码从html代码中抽离出来
   知识点：
   ①window对象表示当前窗口。
       ②window.onload表示当窗口加载完成。后面可以赋值为一个匿名函数，用来初始化页面的各个组件和事件的绑定。
       ③document表示当前窗口的html文件。
       ④document.getElementById()可以用来根据id获取HTML文件中的一个标签。
       ⑤对于一个表格对象(table)来说，可以使用对象名.rows 来获取这个表格的所有行。
       ⑥使用对象名.事件=方法名来为指定标签绑定一个事件。

   5.当点击单价单元格时进行价格编写，并更新表中所有数据
   知识点：
       ①onclick 表示鼠标点击事件。
       ②使用节点对象名.firstChild 来获取节点的第一个子节点。
       ③使用节点对象名.nodeType 来获取节点的节点类型，TextNode类型（文本类型）对应的是3，ElementNode类型（标签类型）对应的是1。
       ④节点对象名.innerText 表示设置或获取当前节点的内部文本。
       ⑤节点对象名.innerHTML 表示设置当前节点的内部HTML。
       ⑥input.select() 表示选中当前input对象的文字。
       ⑦onblur 表示失去焦点事件。
       ⑧innerText获取的是字符串类型，运算需要使用 parseInt() 来将其进行转换。

   6.点击删除图标删除对应行
   知识点：
   ①对于一个表对象来说，可以使用对象名.deleteRow(int index) 来删除指定索引的行。
       ②对于一个行对象来说，可以使用对象名.rowIndex 来获取该行所对应的索引。
       ③使用 window.confirm("文字内容") 来获取一个选择对话框。

   7.确保输入的是数字
   知识点：
   ①onkeydown 表示键盘按下事件。
       ②onkeydown.keyCode 表示获取键盘按下的键值。
       ③onkeydown.returnValue 表示键盘按下是否有反应。

   8.点击按钮添加一行
   知识点：
   ①对于表格对象来说使用对象名.insertRow(index) 来在指定索引位置插入一行。
       ②对于一行对象来说使用对象名.insertCell(index) 来在指定索引插入一个单元格。

代码实现

HTML代码

<html>
	<head>
		<title>水果库存系统</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/cssCode1.css">
		<script type="text/javascript" src="js/jsCode2.js"></script>
	</head>
	<body>
	<div id="container_div">
		<div id="table_div">
			<table id="table">
				<tr>
					<th class="w20">名称</th>
					<th class="w20">单价</th>
					<th class="w20">数量</th>
					<th class="w20">小计</th>
					<th class="w20">操作</th>
				</tr>
				<tr>
					<td>苹果</td>
					<td>5</td>
					<td>10</td>
					<td>100</td>
					<td><img src="imgs/删除.jpg" class="img"></td>
				</tr>
				<tr>
					<td>菠萝</td>
					<td>6</td>
					<td>4</td>
					<td>90</td>
					<td><img src="imgs/删除.jpg" class="img"></td>
				</tr>
				<tr>
					<td>香蕉</td>
					<td>6</td>
					<td>8</td>
					<td>667</td>
					<td><img src="imgs/删除.jpg" class="img"></td>
				</tr>
				<tr>
					<td>西瓜</td>
					<td>3</td>
					<td>8</td>
					<td>20</td>
					<td><img src="imgs/删除.jpg" class="img"></td>
				</tr>
				<tr>
					<td>总计</td>
					<td colspan="4">999</td>
				</tr>
			</table>
		</div>
	</div
	</body>
</html>

CSS代码

body{
	margin:0;
	pddding:0;
	background-color:#808080;
}
div{
	position:relative;
	float:left;
}
#container_div{
	width:80%;
	height:100%;
	margin-left:10%;
	padding:0;
	float:left;
	border:0px solid blue;
	background-color: honeydew;
	border-radius:8px;
}
#table_div{
	width:100%;
	border:0px solid red;
}
#table{
	width:60%;
	line-height:28px;
	margin-top:120px;
	margin-left:20%;
}
#table, #table tr,#table th,#table td{
	border:1px solid gray;
	border-collapse:collapse;
	text-align:center;
	font-size:16px;
	font-family:"黑体";
	font-weight:lighter;
}
.img{
	width:24px;
	height:24px;
}
.w20{
	width:20%;
}

JavaScript代码

//4.将js代码从HTML文件中抽离出来
window.onload=function(){//窗口加载完成绑定一个匿名函数
	updateZJ();//更新总计
	var table=document.getElementById("table");//获取表格
	var trs=table.rows;//获取所有行
	for(var i=1;i<trs.length-1;i++){//给列绑定事件
		trs[i].onmouseover=showBgColor;//鼠标悬浮事件（修改背景颜色）
		trs[i].onmouseout=clearBgColor;//鼠标离开事件（恢复背景颜色）
		var tds=trs[i].cells;//获取所有单元格
		tds[1].onmouseover=showHand;//鼠标悬浮事件（将鼠标图案变成一个手）
		tds[1].onclick=updateDJ;//鼠标点击事件（更新单价）
		tds[4].onclick=deleterow;//鼠标点击事件（删除行）
	}
}
//更新总计
function updateZJ(){
	var table=document.getElementById("table");
	var trs=table.rows;
	var sum=0;
	for(var i=1;i<trs.length-1;i++){
		var tds=trs[i].cells;
		var newxj=parseInt(tds[1].innerText)*parseInt(tds[2].innerText);
		tds[3].innerText=newxj;
		var newsum=parseInt(tds[3].innerText);
		sum=sum+newsum;
	}
	trs[trs.length-1].cells[1].innerText=sum;
}
//1.更新背景
function showBgColor(){
	if(event&&event.srcElement&&event.srcElement.tagName=="TD"){//判断是否是指定的节点
		var tr=event.srcElement.parentElement;//获取行
		tr.style.backgroundColor="navy";//设置行背景色
		var tds=tr.cells;//获取改行的所有单元格
		for(var i=0;i<tds.length;i++){
			tds[i].style.color="white";//设置单元格字体颜色
		}
	}
}
//2.恢复背景
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";//设置单元格字体颜色
		}
	}
}
//3.显示手
function showHand(){
	if(event&&event.srcElement&&event.srcElement.tagName=="TD"){
		event.srcElement.style.cursor="hand";//将鼠标图案变成一个手
	}
}
//5.点击单价更新单价
function updateDJ(){
	if(event&&event.srcElement&&event.srcElement.tagName=="TD"){
		if(event&&event.srcElement.firstChild&&event.srcElement.firstChild.nodeType=="3"){//确保第一个子节点是文字
			var td=event.srcElement;//获取单元格
			var oldvalue=td.innerText;//获取单元格里面数据
			td.innerHTML="<input type='text' size='4'/>";//设置内部HTML
			var input=td.firstChild;//获取内部HTML标签
			if(input.tagName=="INPUT"){
				input.value=oldvalue;//将原有值赋值给新节点
				input.select();//文字自动被选中
				input.onkeydown=ckInput;//绑定键盘按下事件
				input.onblur=updateXJ;//更新小计
			}
		}
	}
}
//更新小计
function updateXJ(){
	if(event&&event.srcElement&&event.srcElement.tagName=="INPUT"){
		var input=event.srcElement;
		var td=input.parentElement;
		var value=input.value;
		td.innerText=value;
		updateZJ();
	}
}
//6.删除行
function deleterow(){
	if(event&&event.srcElement&&event.srcElement.tagName=="IMG"){
		var img=event.srcElement;//获取发生事件的节点
		var table=document.getElementById("table");//获取表格
		if(window.confirm("是否删除")){//删除提示
			var index=img.parentElement.parentElement.rowIndex;//获取行索引
			table.deleteRow(index);//删除行
			updateZJ();//更新总计
		}
	}
}
//7.确保按下的是数字
function ckInput(){
	var keyCode=event.keyCode;//获取键值
	if(!( ( keyCode>=48 && keyCode<=57 ) || keyCode==8 || keyCode==13 )){
		event.returnValue=false;//不是对应键不做响应
	}
	if(keyCode==13){
		event.srcElement.blur();//失去焦点
	}
}