目标
使用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();//失去焦点
}
}