js制作一个动态生成表格（检测你的dom的学习成果）

前端小菜鸭

已于 2022-05-07 21:22:33 修改

阅读量708

点赞数 6

分类专栏： dom 参考文章标签： javascript html 前端

于 2022-05-07 21:17:10 首次发布

本文链接：https://blog.csdn.net/m0_63898223/article/details/124639563

版权

参考同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

dom

2 篇文章 0 订阅

订阅专栏

实验需求

对表格有全选的功能
对表格有取消全选的功能
表格有删除选中选项数据的功能
表格有新增的功能，新增的时候实现姓名班别性别学号的赋值给生成的动态表格

效果截图如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h2{
            width: 250px;
            border-top: 1px solid black;
            margin: 100px auto 0;
            text-align: center;
        }
        table{
            width: 500px;
            margin: 20px auto;
            border-collapse:collapse;
        }
        td{
            border: 1px red solid;
            text-align: center;
        }
        section{

            width: 200px;
            margin: 200px auto 0;

        }
        div{
            width: 200px;
            margin: 0 auto 0;
            display: none;
        }
    </style>
</head>
<body>
<table>

    <h2>学生信息动态增删表</h2>
    <thead>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>班级</th>
        <th>学号</th>
        <th>状态</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>江成雄</td>
        <td>男</td>
        <td>中本3班</td>
        <td>202208762321</td>
        <td><input type="checkbox" name=""></td>
    </tr>
    <tr>
        <td>韦朱玛</td>
        <td>男</td>
        <td>物联网3班</td>
        <td>202208762321</td>
        <td><input type="checkbox" name=""></td>
    </tr>
    <tr>
        <td>周枫航</td>
        <td>男</td>
        <td>机器人3班</td>
        <td>2022022441</td>
        <td><input type="checkbox" name=""></td>
    </tr>
    </tbody>

</table>
<section>

    <button class="btn1">全选</button>
    <button class="btn2">取消</button>
    <button class="btn3">删除</button>
    <button class="btn4">增加</button>
</section>
<div>

<p>
    <span>姓名：</span><input type="text" class="name">
</p>
    <form>
        <span>性别：</span>
        <label value="radio">男</label>
        <input name="sex" value="male"  id="boy" type="radio">
        <label value="radio1">女</label>
        <input name="sex" value="female" id="girl" type="radio">
    </form>
    <p>
        <span> </span>班级：<input type="text" class="date-class">
    </p>
    <p>
        <span> </span>学号：<input type="text" class="number">
    </p>
</div>
<script>
    var tbody=document.querySelector("tbody")
    var btn1=document.querySelector('.btn1')
    var btn2=document.querySelector('.btn2')
    var btn3=document.querySelector('.btn3')
    var btn4=document.querySelector('.btn4')
    var div=document.querySelector('div')
    var flag=0//判断增加事项的变量
    btn1.addEventListener('click',function () {
        var input=tbody.querySelectorAll('input')//写在函数里面每次调用函数对的时候实现动态获取input状态框
        for(var i=0;i<input.length;i++){
            input[i].checked=true;
        }

    })
    btn2.addEventListener('click',function () {
        var input=tbody.querySelectorAll('input')//写在函数里面每次调用函数对的时候实现动态获取input状态框
        for(var i=0;i<input.length;i++){
            input[i].checked=false;
        }
    })
    btn3.addEventListener('click',function () {
        var input=tbody.querySelectorAll('input')//js的运行机制问题如果放在外面只获取一次input主线程的任务，放在函数里面每次点击都实现一次动态获取


        for(var i=0;i<=input.length-1;i++){


         if(input[i].checked===true){
             tbody.removeChild(input[i].parentNode.parentNode)

         }
        }



    })
    btn4.addEventListener('click',function () {
        if(flag===0){
            div.style.display='block'
            flag=1//使用flag的变量检测多次点击事件

        }
        else{
            var r=document.createElement("tr")//创建一个表格行元素
            tbody.insertBefore(r,tbody.r);//添加表格行元素
            var tr0=tbody.firstChild;//根据表格原来第一个孩子的个数为后面的孩子进行数量定位，根据js的运行机制会首先读取
            var tr1=tbody.lastChild;
            for(var i=0;i<tr0.length;i++){
                var d=document.createElement("td")

                tr1.insertBefore(d,tr1.d);

            }
            tr1.children[0].innerHTML=document.querySelector('.name').value;
            var select1=document.getElementById('boy')
            var select2=document.getElementById('girl')
            console.dir(select1)
            console.dir(select2)
            if(select1.checked){
                tr1.children[1].innerHTML='男'//根据js的运行机制设置点击事件会出现延迟下一次才会出现

            }
            else if(select2.checked){
                tr1.children[1].innerHTML='女'
            }
            else {
                tr1.children[1].innerHTML=''

            }


            tr1.children[2].innerHTML=document.querySelector('.date-class').value;
            tr1.children[3].innerHTML=document.querySelector('.number').value
            var txt=document.createElement('input')
            tr1.children[4].appendChild(txt);
            tr1.children[4].children[0].type='checkbox'//使得添加的input变为复选框

            alert('已经添加了信息了')
            div.style.display='none'
            flag=0;

        }
        document.querySelector('.name').value=''//给第二次输入框清0
        document.querySelector('.date-class').value=''//给第二次输入框清0
        document.querySelector('.number').value=''//给第二次输入框清0




    })

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

由于本人初学者代码的质量不是很高，希望得到大佬的进一步指正和完善。