zoukankan      html  css  js  c++  java
  • 使用 DOM对象,控制HTML元素 来制作的一个简单的表格

    制作一个表格,显示班级的学生信息。

    要求:

    1. 鼠标移到不同行上时背景色改为色值为 red,移开鼠标时则恢复为原背景色 white

    2. 点击添加按钮,能动态在最后添加一行

    3. 点击删除按钮,则删除当前行。

    代码如下:

    <!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 btn = document.getElementById("a");
                btn.onclick = function(){
                    var table = document.getElementsByTagName("table")[0];
                    add(table,"tr");
                }
    
                //删除行
                var a = document.getElementsByTagName("a");
                for(var i=0;i<a.length;i++){
                    a[i].onclick =function(){
                        var parentTwo = this.parentNode.parentNode;
                        var parentThree = parentTwo.parentNode;
                        remove(parentTwo,parentThree);
                    }
                }
    
                //鼠标移动修改颜色
                var tr = document.getElementsByTagName("tr");
                for(var i=0;i<tr.length;i++){
                    tr[i].onmouseover = function(){
                        background(this,"red");
                    };
                    tr[i].onmouseout = function(){
                        background(this,"white");
                    }
                }
    
            };
    
            //改变颜色的函数
            function background(obj,target){
                obj.style.background = target;
            }
    
    
            //删除的函数
            function remove(two,three) {
                three.removeChild(two);
    
            }
    
            //增加行中删除操作的函数
            function remover(obj) {
                var remove1=document.getElementById('table').childNodes[1];
                var remove2=obj.parentNode.parentNode;
                remove1.removeChild(remove2);
            }
    
            //增加行的函数
                function add(parent,child) {
                    var newone=document.createElement("tr");//新增行
                    newone.onmouseover = function(){
                        background(this,"red");
                    };
                    newone.onmouseout = function(){
                        background(this,"white");
                    };
                    var newone1=document.createElement("td");
                    newone1.innerHTML="<td />";
                    newone.appendChild(newone1);
                    var newone2=document.createElement("td");
                    newone2.innerHTML="<td />";
                    newone.appendChild(newone2);
                    var newone3=document.createElement("td");
                    newone3.innerHTML="<a href='javascript:;'  onclick='remover(this)' >删除</a>";
                    newone.appendChild(newone3);
                    document.getElementById("table").childNodes[1].appendChild(newone);
                }
    
        </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:;" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
        </tr>
    
        <tr>
            <td>xh002</td>
            <td>刘小芳</td>
            <td><a href="javascript:;" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
        </tr>
    
    </table>
    <input id ="a" type="button" value="添加一行"  />   <!--在添加按钮上添加点击事件  -->
    </body>
    </html>
  • 相关阅读:
    document.getElementById(“id”)与$("#id")的区别
    sqlserver 无法打开备份文件a.bak
    xnconvert 图片转换工具
    基于jQuery的 h5移动端抽奖页面插件
    nodeJS 简单启动express服务器
    jquery 按钮切换插件
    微信判断手机有没有APP,有则打开,没有则跳到应用商城
    jQuery 文字向上轮播
    Node.js制作爬取简书内容的爬虫
    jquery手机端轮播图,点击放大手动轮播
  • 原文地址:https://www.cnblogs.com/fireporsche/p/6297693.html
Copyright © 2011-2022 走看看