◆◆0

js实现表格行悬停高亮功能特效（附代码）

重蔚 2018年4月3日 JavaScript自学教程 1,671 views

文章目录[隐藏]

知识点

判断用户输入的文本框数据是否是数字

<input id="t1" name="t1" type="text" /><input type="button" value="click" />
<script language="javascript" type="text/javascript">
function Test(){
var t1=document.getElementById("t1");
//alert(typeof(t1.value));
alert(isNaN(t1.value));
}
</script>

function Test(){

var t1=document.getElementById("t1");

//alert(typeof(t1.value));

alert(isNaN(t1.value));

}

</script>

isNaN: is Not a Number，不是一个数字。不是数字返回true，是数字返回false。

知识点

1、样式或属性值中间有“-”，我们称为长属性，比如修改background-color，该对象.backgroundColor=”值”;
2、变量作用域
源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>重蔚自留地自学PHP</title>
<style>
.div1{
width:400px;
height:30px;
margin-bottom:3px;
}
</style>
</head>
 
<body>
<div class="div1" style="background-color:#94A4CD;" onmouseover="OnMouseoverBG(this);" onmouseout="OnmouseoutComeBack(this)"><a href="#" title="xww">重蔚自留地</a></div>
<div class="div1" style="background-color:#82AC9E;" onmouseover="OnMouseoverBG(this);" onmouseout="OnmouseoutComeBack(this)">重蔚自留地-cwhello.com</div>
<div class="div1" style="background-color:#94A4CD;" onmouseover="bgc1=this.style.backgroundColor;this.style.backgroundColor='blue';" onmouseout="this.style.backgroundColor=bgc1;">重蔚自留地-cwhello.com</div>
<div class="div1" style="background-color:#82AC9E;" onmouseover="bgc1=this.style.backgroundColor;this.style.backgroundColor='blue';" onmouseout="this.style.backgroundColor=bgc1;">重蔚自留地-cwhello.com</div>
<div class="div1">重蔚自留地-cwhello.com</div>
<div class="div1">重蔚自留地-cwhello.com</div>
</body>
<script language="javascript" type="text/javascript">
var bgc;
//原来的背景色，注意变量的作用域
//悬停高亮显示
function OnMouseoverBG(obj){
bgc=obj.style.backgroundColor;
obj.style.backgroundColor="blue";
obj.style.cursor="pointer";
}
 
//鼠标移开背景还原
function OnmouseoutComeBack(obj){
obj.style.backgroundColor=bgc;
}
</script>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>重蔚自留地自学PHP</title>

<style>

.div1{

width:400px;

height:30px;

margin-bottom:3px;

}

</style>

</head>

<body>

<div class="div1" style="background-color:#94A4CD;" onmouseover="OnMouseoverBG(this);" onmouseout="OnmouseoutComeBack(this)"><a href="#" title="xww">重蔚自留地</a></div>

<div class="div1" style="background-color:#82AC9E;" onmouseover="OnMouseoverBG(this);" onmouseout="OnmouseoutComeBack(this)">重蔚自留地-cwhello.com</div>

<div class="div1" style="background-color:#94A4CD;" onmouseover="bgc1=this.style.backgroundColor;this.style.backgroundColor='blue';" onmouseout="this.style.backgroundColor=bgc1;">重蔚自留地-cwhello.com</div>

<div class="div1" style="background-color:#82AC9E;" onmouseover="bgc1=this.style.backgroundColor;this.style.backgroundColor='blue';" onmouseout="this.style.backgroundColor=bgc1;">重蔚自留地-cwhello.com</div>

<div class="div1">重蔚自留地-cwhello.com</div>