js中window.onload的使用

直接贴代码:

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

慕的地10843
浏览 424回答 3
3回答

慕丝7291255

隔行换色css就可以搞定啊。 绑定事件也不用循环一个个绑,用jquery选择器绑一次就可以啊
打开App,查看更多内容
随时随地看视频慕课网APP