直接贴代码:
<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();
}
结果只是在页面载入完成后执行一次,并不是鼠标移出数据行后弹出。
慕丝7291255