js中关于onload和innerHTML的用法

最新推荐文章于 2022-04-12 17:55:55 发布

WGG1997

最新推荐文章于 2022-04-12 17:55:55 发布

阅读量917

点赞数

本文链接：https://blog.csdn.net/WGG1997/article/details/80720539

版权

1.一个结点对象的innerHTML指的是在这个标签中所嵌套的内容，而不仅仅是文本信息，所有嵌套的内容用“”表示

2.onload 在文档加载完成之后会执行，但是后来再通过js更改相关DOM结点则不会起作用，所以要及时在结点更改的地方，同时写上自己想要带有的功能，

<!DOCTYPE html>
<html>
<head>
    <title> new document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <script type="text/javascript">

        window.onload = function(){
            var tr=document.getElementsByTagName("tr");
            for(var i= 0;i<tr.length;i++)
            {
                bgcChange(tr[i]);
            }
            // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
        }
        function bgcChange(obj)
        {
            obj.onmouseover=function(){
                obj.style.backgroundColor="#f2f2f2";
            }
            obj.onmouseout=function(){
                obj.style.backgroundColor="#fff";
            }
        }

        // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
        var num=2;
        function add(){
            num++;
            var tr=document.createElement("tr");
            var xh=document.createElement("td");
            var xm=document.createElement("td");
            xh.innerHTML="xh00"+num;
            xm.innerHTML="第"+num+"学生";
            var del=document.createElement("td");
            del.innerHTML="<a href='javascript:;' οnclick='del(this)' >删除</a>";
            var tab=document.getElementById("table");
            tab.appendChild(tr);
            tr.appendChild(xh);
            tr.appendChild(xm);
            tr.appendChild(del);

        /*    var tr = document.getElementsByTagName("tr");
            for(var i= 0;i<tr.length;i++)
            {
                bgcChange(tr[i]);
            }*/
        } //如果没有此处代码，那么鼠标放上颜色变化，只是对最开始的两个tr起作用


        // 创建删除函数
        function del(obj)
        {
            var tr=obj.parentNode.parentNode;
            tr.parentNode.removeChild(tr);
        }





    </script>
</head>
<body>
<table border="1" width="50%" id="table">
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>操作</th>
    </tr>

    <tr>
        <td>xh001</td>
        <td>王小明</td>
        <td><a href="javascript:;" οnclick="del(this);">删除</a></td>   <!--在删除按钮上添加点击事件  -->
    </tr>

    <tr>
        <td>xh002</td>
        <td>刘小芳</td>
        <td><a href="javascript:;" οnclick="del(this);">删除</a></td>   <!--在删除按钮上添加点击事件  -->
    </tr>

</table>
<input type="button" value="添加一行" οnclick="add()" />   <!--在添加按钮上添加点击事件  -->
</body>
</html>