直接贴代码:
<script type="text/javascript">
//动态给js添加class属性
function addClass(element, value) {
if (!element.className) {
element.className = value; //如果element本身不存在class,则直接添加class为value的值
} else {
element.className += " " + value; //如果element之前有一个class值,注意中间要多一个空格,然后再加上value的值
}
}
//隔行换色
function stripeTable() {
var tables = document.getElementsByTagName("table"); //遍历文档中的所有table
for (var i = 0; i < tables.length; i++) {
var rows = document.getElementsByTagName("tr");
for (var j = 0; j < rows.length; j++) {
if (j % 2 == 0) {
addClass(rows[j], "tablelight"); //如是偶数行,则添加class为odd的属性
//rows[j].setAttribute("class", "odd");
}
}
}
}
//鼠标经过时高亮显示
function highlightRows() {
var rows = document.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
rows[i].oldClassName = rows[i].className; //首先保存之前的class值
rows[i].onmouseover = function () {
addClass(this, "tablemouse"); //鼠标经过时添加class为highlight的值
}
rows[i].onmouseout = function () {
this.className = this.oldClassName; //鼠标离开时还原之前的class值
}
}
}
window.onload = function () {
stripeTable();
highlightRows();
}
</script>
<asp:Panel ID="plItem" runat="server">
<tr>
<td>
<a href="javascript:Edit('<%#Eval("id") %>')">编辑</a>
<asp:LinkButton ID="lbtDelete" CommandName="Delete" CommandArgument='<%#Eval("id") %>' runat="server" OnClientClick="return confirm('确定删除吗?')">删除</asp:LinkButton>
</td>
<td>
<asp:Label runat="server" ID="lblID" Text='<%#Eval("id") %>'></asp:Label></td>
<td><%#Eval("name") %></td>
<td><%#Eval("author") %></td>
<td><%#Eval("ISBN") %></td>
<td><%#Eval("publisher") %></td>
<td><%#Eval("language") %></td>
<td><%#Eval("price") %></td>
<td><%#Eval("putin_time") %></td>
<td><%#Eval("type") %></td>
</tr>
</asp:Panel>
问题:
1、此例使用了window.onload,目前的理解是对stripeTable()和highlightRows()两个方法的监听,也就是当控件触发时执行。
但是此处的window.onload是对方法的监听,但是却不知道什么地方引用,进而触发这两个方法,不知道为什么会触发执行。
2、当在<tr>中添加自定义方法<tr onmouseout="mouseout()">,javascript中添加对应的方法function mouseout(){alert("鼠标移出");}后,
却根本不会触发新添加的方法。
于是将function mouseout()方法也放到window.onload方法中
window.onload = function () {
stripeTable();
highlightRows();
mouseout();
}
结果只是在页面载入完成后执行一次,并不是鼠标移出数据行后弹出。
script标签中的代码加载下来就开始执行。你的script中先定义了两个function,接着执行window.onload(这个是为window的onload事件绑定响应函数,绑定的函数是在页面中内容都加载完之后执行的)。然后到页面加载完成之后,执行onload响应函数,然后就执行了stripeTable()和highlightRows()。
在<tr>中添加onmouseout,其实和rows[i].onmouseout = function () {
this.className = this.oldClassName; //鼠标离开时还原之前的class值
}是一样的,都是给tr的onmouseout事件添加响应函数。现在你就添加了两次,js取后一个所以添加的mouseout函数没有用。你在onload中写的mouseout其实只是执行了一次mouseout函数,并不是绑定。
首先,谢谢回复。
1、我就是不了解这种触发机制,只会简单的那种在<script>中写好的function,在控件里添加个事件(点击、移出等)来直接触发。
2、这个代码是从网上搜的,按照我的理解window.onload就是初始化函数,就在文档全部加载完成后执行一次,比如stripeTable()把表格隔行换色,然后既然只执行一次,后来的鼠标移出<tr>就不会触发highlightRows()函数。但是实际上还是触发了,所以我懵了。
3、看了您的回复之后的理解:
var rows = document.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++)
{
rows[i].oldClassName = rows[i].className; //首先保存之前的class值
rows[i].onmouseover = function () {
addClass(this, "tablemouse"); //鼠标经过时添加class为highlight的值
}
rows[i].onmouseout = function () {
this.className = this.oldClassName; //鼠标离开时还原之前的class值
}
}
这个函数会循环遍历表格,获取所有的<tr>,然后将<tr>都绑定两个函数onmouseout()和onmouseover()。进而 触发。
这样理解应该还有问题。
@我有我奥妙: 理解的方向是对的。rows[i].onmouseover = function () {
addClass(this, "tablemouse"); //鼠标经过时添加class为highlight的值
}
这里是给<tr>的onmouseout和onmouseover两个事件绑定了两个匿名的函数。onmouseout和onmouseover不是函数。
@授之以渔: 哦,对对对,onmouseout和onmouseover是触发事件。
我又写了个小页面:
{
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>window.onload</title>
<style type="text/css">
#bg{
width:100px;
height:100px;
border:2px solid red;
}
</style>
<script type="text/javascript">
function a(){
document.getElementById("bg").style.backgroundColor="#F90";
}
function b(){
document.getElementById("bg").style.width="200px";
}
function c(){
var btn= document.getElementById("btn");
btn.oldClassName= btn.className;
btn.onmousedown=function (){
alert(this.oldClassName);
}
}
window.onload=function(){
a();
b();
c();
}
</script>
</head>
<body>
<div id="bg">
<button id="btn" type="button" class="btnclass">测试
</button>
</div>
</body>
</html>
}
现在差不多理解了,多谢。
隔行换色css就可以搞定啊。
绑定事件也不用循环一个个绑,用jquery选择器绑一次就可以啊
用不好,这个也是从网上搜的。虽然功能实现了,但是这个原理一点不懂,能解释下吗,可能以后还会碰到这个window.onload。