js的使用_javascript好学吗
Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说
js的使用_javascript好学吗,希望能够帮助你!!!。
目标
使用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:#; } 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();//失去焦点 } }今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
上一篇
已是最后文章
下一篇
已是最新文章
相关推荐
最新文章
