JavaScript-Dom接口学习相关案例

最新推荐文章于 2022-05-12 20:06:19 发布

Pop–

最新推荐文章于 2022-05-12 20:06:19 发布

阅读量295

点赞数 2

分类专栏： JavaScript 文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_45026839/article/details/109284616

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、案例大纲

1.点击按钮弹出警示框
2.分时显示不同图片，显示不同问候语
3.仿京东显示密码
4.淘宝点击关闭二维码
5.循环精灵图背景
6.显示隐藏文本框内容
7.密码框格式提示错误信息
8.百度换肤
9.表格隔行变色
10.表单全选取消全选案例
11.tab 栏切换（重点案例）
12.下拉菜单
13.留言板案例（发布，删除）
14.动态生成表格

二、相关图片资料以及源码文件：

https://gitee.com/pop–sheep/java-script-dom/tree/master/

三、案例内容

案例：点击按钮弹出警示框案例分析：实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom接口练习</title>
</head>

<body>
    <button id="btn">方敬</button>
    <script>
        // 当点击方敬按钮后,出现警示框
        // 1.事件是由三部分组成 : 事件源 事件类型 事件处理程序 
        // (1) 事件源 事件被触发的对象 谁 按钮
        var btn = document.querySelector('#btn');
        // (2) 事件类型 如何触发  什么事件 比如鼠标点击（onclick）还是鼠标经过 还是键盘按下
        // (3) 事件处理程序 通过一个函数赋值的方式完成 
        btn.onclick = function () {
            alert('是傻逼！');
        }
    </script>
</body>

</html>

案例：分时显示不同图片，显示不同问候语
案例分析：实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom接口练习</title>
</head>

<body>
    <img src="images/s.gif" alt="">
    <div>上午好 ！！</div>
</body>
<script>
    var img = document.querySelector('img');
    var div = document.querySelector('div');
    // Date 内置对象 需要实例化才能使用
    var date = new Date();
    var h = date.getHours();
    if (h > 12) {
        img.src = 'images/x.gif';
        div.innerHTML = '下午好 ！！';
    }
    if (h > 18) {
        img.src = 'images/w.gif';
        div.innerHTML = '晚上好 ！！';
    }
    if (h < 12) {
        img.src = 'images/z.gif';
        div.innerHTML = '早上好 ！！';
    }
</script>

</html>

案例：仿京东显示密码案例分析：实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom接口练习</title>
    <style>
        .box {
            position: relative;
            width: 400px;
            margin: 1px solid #000000;
            margin: 100px auto;

        }

        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
            background-color: aquamarine;
        }

        .box img {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 24px;
        }
    </style>
</head>

<body>
    <div class="box">
        <label for="">
            <img src="images/close.png" alt="" id="img">
        </label>
        <input type="password" name="" id="">
    </div>
    <script>
        var input = document.querySelector('input');
        var img = document.querySelector('img');
        var flag = 0;
        img.onclick = function () {
            // 一个按钮俩个状态
            // 点击一次之后 flag值发生变化 默认为密码框 点击之后改变flag 值
            if (flag == 0) {
                img.src = 'images/open.png';
                input.type = 'text';
                flag = 1;
            } else {
                img.src = 'images/close.png';
                input.type = 'password';
                flag = 0;
            }

        }
    </script>
</body>

</html>

案例：淘宝点击关闭二维码案例分析：实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
            /* display: block; */
        }
        
        .box img {
            width: 60px;
            margin-top: 5px;
        }
        
        .close-btn {
            position: absolute;
            top: -1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        淘宝二维码
        <img src="images/tao.png" alt="">
        <i class="close-btn">×</i>
    </div>
    <script>
        // 1. 获取元素 
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        // 2.注册事件 程序处理
        btn.onclick = function() {
            box.style.display = 'none';
        }
    </script>
</body>

</html>

循环精灵图背景案例分析：实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom接口学习</title>
    <style>
        li {
            list-style: none;
        }

        .box {
            width: 250px;
            margin: 100px auto;
        }

        .box li {
            float: left;
            width: 24px;
            height: 24px;
            background-color: pink;
            margin: 15px;
            background: url(images/sprite.png);
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        // 循环精灵图制作 利用for循环
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            var index = 44 * i;
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </script>
</body>

</html>

案例：显示隐藏文本框内容案例分析：实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom接口练习</title>
    <style>
        input {
            color: #999999;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <input type="text" name="" id="" value="手机">
    <script>
        // onfoucs 获得焦点
        // onblur 失去焦点
        var text = document.querySelector('input');
        // 获得焦点
        text.onfocus = function () {
            if (this.value === '手机') {
                this.value = '';
            }
            //  获得焦点后 把里面的文字内容颜色变黑
            this.style.color = '#333';
        }
        // 失去焦点
        text.onblur = function () {
            if (this.value === '') {
                this.value = '手机';
            }
            // 失去焦点后 把里面的文字内容颜色变浅
            this.style.color = '#999999';
        }
    </script>
</body>

</html>

案例: 密码框格式提示错误信息案例分析：实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dom接口练习</title>
    <style>
        div {
            width: 600px;
            margin: 100px auto;
        }

        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(images/mess.png) no-repeat left center;
            padding-left: 20px;
        }

        .wrong {
            color: red;
            background-image: url(images/wrong.png);
        }

        .right {
            color: green;
            background-image: url(images/right.png);
        }
    </style>
</head>

<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
        // 首先判断的事件是表单失去焦点 onblur
        // 如果输入正确则提示正确的信息颜色为绿色小图标变化
        // 如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化
        // 因为里面变化样式较多，我们采取className修改样式
        // 1.获取元素
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        //2. 注册事件 失去焦点
        ipt.onblur = function () {
            // 根据表单里面值的长度 ipt.value.length
            if (this.value.length < 6 || this.value.length > 16) {
                // console.log('错误');
                message.className = 'message wrong';
                message.innerHTML = '您输入的位数不对要求6~16位';
            } else {
                message.className = 'message right';
                message.innerHTML = '您输入的正确';
            }
        }
    </script>
</body>

</html>

案例：百度换肤案例分析：
实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url(images/1.jpg) no-repeat center top;
        }

        li {
            list-style: none;
        }

        .baidu {
            overflow: hidden;
            margin: 100px auto;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
        }

        .baidu li {
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }

        .baidu img {
            width: 100px;
        }
    </style>
</head>

<body>
    <ul class="baidu">
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
    </ul>
    <script>
        // 1. 获取元素 
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        // console.log(imgs);
        // 2. 循环注册事件
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function () {
                // this.src 就是我们点击图片的路径   images/2.jpg
                // console.log(this.src);
                // 把这个路径 this.src 给body 就可以了
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>
</html>

案例：表格隔行变色案例分析：实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom接口学习</title>
    <style>
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }

        thead tr {
            height: 30px;
            background-color: skyblue;
        }

        tbody tr {
            height: 30px;
        }

        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }

        .bg {
            background-color: pink;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr class="">
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr class="">
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr class="">
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr class="">
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr class="">
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr class="">
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>
    <script>
        // 1.获取元素
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        // 2.鼠标经过 onmouseover 鼠标离开 onmouseout
        // console.log(trs);
        for (var i = 0; i < trs.length; i++) {
            trs[i].onmouseover = function () {
                this.className = 'bg';
            }
            // 鼠标离开
            trs[i].onmouseout = function () {
                this.className = '';
            }
        }
    </script>
</body>

</html>

案例：表单全选取消全选案例案例分析：实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom接口练习</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
    </div>
    <script>
        // 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
        // 获取元素
        var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');// 下面所有的复选框
        // 注册事件
        j_cbAll.onclick = function () {
            // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
            console.log(this.checked);
            for (var i = 0; i < j_tbs.length; i++) {
                j_tbs[i].checked = this.checked;
            }
        }
        // 2. 下面复选框需要全部选中， 上面全选才能选中做法： 
        // 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function () {
                // flag 控制全选按钮是否选中 默认为true选中
                var flag = true;
                // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
                for (var i = 0; i < j_tbs.length; i++) {
                    if (!j_tbs[i].checked) {
                        // j_tbs[i].checked 按钮被选中 取反则没选中 没选中的话我们就去全选按钮改为false 即flag为false
                        flag = false;
                        // j_cbAll.checked = false; 这里利用一个flag变量来控制是否选中 
                        break; //  只要有一个没有被选中就退出循环
                    }
                }
                j_cbAll.checked = flag;
            }
        }
    </script>
</body>

</html>

案例：tab 栏切换（重点案例）案例分析：实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom接口练习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .tab {
            width: 978px;
            margin: 100px auto;
        }

        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }

        .item_info {
            padding: 20px 0 0 20px;
        }

        .item {
            display: none;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>
            <script>
                //  1. 获取元素
                var items = document.querySelectorAll('.item');
                var tab_list = document.querySelector('tab_list');
                var lis = document.querySelector('.tab_list').querySelectorAll('li');  // 获得tab_list里的全部li
                //  2.事件绑定
                for (var i = 0; i < lis.length; i++) {
                    lis[i].setAttribute('index', i);      // 给tab_list 里面的所有小li添加自定义属性 setAttribute('属性','值');
                    // 排他思想 点击某一个 当前这一个底色改变 其余不变
                    lis[i].onclick = function () {
                        // 先用一个循环 把底色全都去除
                        for (var i = 0; i < lis.length; i++) {
                            lis[i].className = '';
                        }
                        this.className = 'current';  // 将当前颜色的类名改为current 对应的样式
                        var index = this.getAttribute('index'); // element.getAttribute('属性');
                        // console.log(index);
                        // 下面内容显示 ： 让 tab_con 里面对应序号的内容显示,其余隐藏(排他思想)
                        for (var i = 0; i < items.length; i++) {
                            items[i].style.display = 'none';
                        }
                        // 留下我自己  让对应的item  显示出来
                        items[index].style.display = 'block';
                    }

                }
            </script>
        </div>
    </div>
</body>

</html>

案例：下拉菜单案例分析：实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 100px;
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        // 1. 获取元素
        var nav = document.querySelector('.nav');
        var lis = nav.children; // 得到4个小li
        // 2.循环注册事件
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function() {
                this.children[1].style.display = 'block';
            }
            lis[i].onmouseout = function() {
                this.children[1].style.display = 'none';
            }
        }
    </script>
</body>

</html>

案例：留言板案例（发布，删除）案例分析：

在这里插入图片描述实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom接口练习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 100px;
        }

        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            resize: none;
        }

        ul {
            margin-top: 50px;
        }

        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }

        li a {
            float: right;
        }
    </style>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <ul>
    </ul>
    <script>
        // 核心思路： 点击按钮之后，就动态创建一个li，添加到ul 里面。
        // 创建li 的同时，把文本域里面的值通过li.innerHTML 赋值给 li
        // 如果想要新的留言后面显示就用 appendChild 如果想要前面显示就用insertBefore
        // 运用知识 创建节点 document.creatElement('标签名'); 添加标签： node.appendChild() 或者 node.insertBefore(child, 指定元素)

        //  1.获取元素
        var btn = document.querySelector('button');
        var tet = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        // 2. 绑定事件
        btn.onclick = function () {
            if (tet.value == '') {
                alert('您没有填写内容，不能发布！');
            }
            else {
                // 创建元素
                var li = document.createElement('li');
                // 先有li 才能赋值
                li.innerHTML = tet.value + "    <a href='javascript:;'> 删除</a>";
                // ul.appendChild(li); 添加到父级末尾
                // node.appendChild() 或者 node.insertBefore(child, 指定元素) '指定元素'指的是位置.一般插入在开头
                ul.insertBefore(li, ul.children[0]);
                // 删除元素 删除的是当前链接的li 它的父亲
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function () {
                        // node.removeChild(child); 删除的是 li 当前 a 所在的li this.parentNode
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>
</body>

</html>

案例：动态生成表格案例分析：实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom接口练习</title>
    <style>
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }

        td,
        th {
            border: 1px solid #333;
        }

        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        // 1.定义好数据,采取对象形式存储
        var dates = [{
            name: '方敬',
            subject: 'JavaScript',
            score: 0
        }, {
            name: '名誉',
            subject: 'JavaScript',
            score: 90
        }, {
            name: '京东',
            subject: 'JavaScript',
            score: 100
        }, {
            name: '滔博',
            subject: 'JavaScript',
            score: 59
        }];
        // 2. 创建行以及单元格 将数据存入里面 (双重for循环)
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < dates.length; i++) {
            var tr = document.createElement('tr'); // 创建行
            tbody.appendChild(tr); // 将行添加到tbody里面
            for (var k in dates[i]) { //创建单元格td
                var td = document.createElement('td');
                td.innerHTML = dates[i][k]; // 将dates 里面的数据添加到单元格里面 其中 dates[i]是对象  dates[i][k]是属性值
                tr.appendChild(td);
            }
            //  3. 创建有删除2个字的单元格
            var td = document.createElement('td');
            td.innerHTML = '<a href= "javascript:;">删除 </a>';
            tr.appendChild(td);
        }
        // 4.删除操作
        var as = document.querySelectorAll('a');
        for (var i = 0; i < dates.length; i++) {
            as[i].onclick = function () {
                // 点击删除 该行tr全部删除 即将a标签的爸爸(td)的爸爸(tr)remove
                tbody.removeChild(this.parentNode.parentNode);
            }
        }
    </script>
</body>

</html>

Pop–

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
JavaScript-Dom接口学习相关案例

1.点击按钮弹出警示框 2.分时显示不同图片，显示不同问候语 3.仿京东显示密码 4.淘宝点击关闭二维码 5.循环精灵图背景 6. 显示隐藏文本框内容 7.密码框格式提示错误信息 8.百度换肤 9.表格隔行变色 10.表单全选取消全选案例 11.案例：tab 栏切换（重点案例） 12.下拉菜单 13.留言板案例（发布，删除）14.动态生成表格
复制链接

扫一扫

专栏目录