js练习第四天

最新推荐文章于 2021-12-14 16:49:45 发布

小何童鞋

最新推荐文章于 2021-12-14 16:49:45 发布

阅读量266

点赞数 1

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

本文链接：https://blog.csdn.net/qq_45111873/article/details/108094695

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

js习题

习题

习题

1.表格添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            width: 600px;
            cursor: pointer;
        }

        table td {
            text-align: center;
        }

        table th {
            background-color: blueviolet;
        }

        table tr {
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="dv">
    请输入姓名:
    <input type="text" value="" id="uname"/>
    <br/> 请输入邮箱:
    <input type="text" value="" id="email"/>
</div>

<input type="button" value="添加" id="btn"/>
<table border="1" cellpadding="0" cellspacing="0" id="tb">
    <thead>
    <tr>
        <th>姓名</th>
        <th>邮箱</th>
    </tr>
    </thead>
    <tbody id="tbd">
    <tr>
        <td>小黑</td>
        <td>xiaohei@126.com</td>
    </tr>
    <tr>
        <td>小黑2</td>
        <td>xiaohei@126.com</td>
    </tr>
    </tbody>
</table>
<script>
    var btn = document.getElementById('btn')
    btn.onclick = function () {
        // console.log('haha')
        // 获取文本框的内容
        var uname = document.getElementById('uname')
        var email = document.getElementById('email')
        if (uname.value == '' || email.value == '') {
            alert('信息不完整')
            return false;
        }

        // 创建列
        var td1 = document.createElement('td')
        td1.innerHTML = uname.value
        var td2 = document.createElement('td')
        td2.innerHTML = email.value

        //，把列添加到行中
        var trObj = document.createElement('tr')

        trObj.appendChild(td1)
        trObj.appendChild(td2)

        var tbd = document.getElementById('tbd')
        // 把行添加到 tbody
        tbd.appendChild(trObj)



    }

</script>
</body>
</html>

2.删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>删除</button>
<ul>
    <li>熊大</li>
    <li>熊二</li>
    <li>光头强</li></ul>
<script>
    var ul = document.querySelector('ul')
    var btn = document.querySelector('button')
    btn.onclick = function () {
        if (ul.children.length == 0){
            // alert('还删呐')
            this.disabled = true;
        }else {
            ul.removeChild(ul.children[0])
        }
    }
</script>
</body>
</html>

3.动态生成表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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 datas = [{
        name: '魏璎珞',
        subject: 'JavaScript',
        score: 100
    }, {
        name: '弘历',
        subject: 'JavaScript',
        score: 98
    }, {
        name: '傅恒',
        subject: 'JavaScript',
        score: 99
    }, {
        name: '明玉',
        subject: 'JavaScript',
        score: 88
    }, {
        name: '大猪蹄子',
        subject: 'JavaScript',
        score: 0
    }];
   var tbody = document.querySelector('tbody')
    //1.遍历数据
        for (var i = 0; i < datas.length; i++) {
            //2.创建tr
            var tr = document.createElement('tr')
            tbody.appendChild(tr)
            for (var k in datas[i]){
                var td = document.createElement('td')
                td.innerHTML=datas[i][k]
                tr.appendChild(td)
            }
            //3.添加删除
            var td = document.createElement('td')
                td.innerHTML='<a href="#">删除</a>'
                tr.appendChild(td)
    }
    //2.删除
    var as = document.querySelectorAll('a')
    for (var i = 0; i < as.length; i++) {
        as[i].onclick = function (){
            tbody.removeChild(this.parentNode.parentNode)
        }
    }
</script>
</body>
</html>

4.留言发布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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;
        }
    </style>
</head>
<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul></ul>
<script>
    //获取元素
    var btn=document.querySelector('button');
    var text=document.querySelector('textarea');
    var ul=document.querySelector('ul');
    //注册事件
    btn.onclick = function (){
        // console.log(text.value)
        if(text.value==''){
            alert('你啥也没写就发布？')
            return false;
        }else {
            //创建li
            var li = document.createElement('li')
            //先有li才能赋值
            li.innerHTML=text.value
            //添加元素
            ul.insertBefore(li,ul.children[0])
            // ul.appendChild(li)
        }
    }
</script>
</body>
</html>

5.留言发布删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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;
        }
    </style>
</head>
<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul></ul>
<script>
    //获取元素
    var btn=document.querySelector('button');
    var text=document.querySelector('textarea');
    var ul=document.querySelector('ul');
    //注册事件
    btn.onclick = function (){
        // console.log(text.value)
        if(text.value==''){
            alert('你啥也没写就发布？')
            return false;
        }else {
            //创建li
            var li = document.createElement('li')
            li.innerHTML=text.value+"<a href='javascript:;'>删除</a>"
            ul.insertBefore(li,ul.children[0])
            var as = document.querySelectorAll('a')
            for (var i = 0; i < as.length; i++) {
                as[i].onclick=function (){
                    ul.removeChild(ul.children[0])
                }
            }
        }
    }
</script>
</body>
</html>

小何童鞋

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js练习第四天

js习题习题表格添加标题习题表格添加<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> table { width: 600px; cursor: pointer; }
复制链接

扫一扫

专栏目录