老师作业用js制作一个简单的表单添加和删除_编写程序,实现制作课程表添加与删除页面效果-CSDN博客

本文链接：https://blog.csdn.net/qq_45070002/article/details/114807690

1先写好html和css样式

  <style>
        #form {
            width: 480px;
            margin: 30px auto;
            border: 1px solid #eee;
            border-radius: 5px;
            padding: 10px;
            line-height: 30px;
            position: relative;
        }

        button {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }

        #tab {
            width: 500px;
            margin: 30px auto;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #000;
            padding: 5px;
        }

        tbody tr td:first-child {
            text-align: center;
        }

        /*input[type]  属性选择器  选择input标签，并且有type属性input标签*/
        /*input[type = "checkbox"]  选择有type属性并且值为checkbox的input标签*/
        input[type="checkbox"] {
            width: 15px;
            height: 15px;
        }

        #div1 {
            position: relative;
            width: 480px;
            padding: 10px;
            margin: 0 auto;
        }
    </style>

</head>

<body>
    <div id="form">
        请输入姓名: <input type="text" id="name"> <br>
        请输入性别: <input type="radio" id="sex" name="sex" checked>男 <input type="radio" name="sex">女<br>
        请输入年龄: <input type="text" id="age">
        <button>添加到表格</button>
    </div>
    <table id="tab">
        <thead>
            <tr>
                <th width="20%"><input type="checkbox" id="all">全选</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>张三</td>
                <td>女</td>
                <td>88</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>李四</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>王五</td>
                <td>女</td>
                <td>1</td>
            </tr>
        </tbody>
    </table>
    <div id="div1">
        <button>删除所选行</button>
    </div>
</body>
在这里插入代码片

2.写好样式后，再写js文件。
表单的添加和删除，要用到创建节点，删除节点，追加节点等内容
document.createElement()
remove()
appendChild（）

    var ipt = document.querySelectorAll('input') //找输入框
    var btn = document.querySelectorAll('button')//找按钮
    var tBody = document.querySelector('tbody')//tbody
    var oldTd = document.querySelectorAll('td')//td
    var all = document.getElementById('all')//全选
    var oldTr = tBody.getElementsByTagName('tr') //找到行
    var check =tBody.getElementsByTagName('input') //找到check

3要满足添加，删除，全选三个功能，所以需要创建三个点击事件

添加
    btn[0].onclick = function () {
        //点击后创建行 和内容
        var tr = document.createElement('tr')
        var td1 = document.createElement('td')
        var td2 = document.createElement('td')
        var td3 = document.createElement('td')
        var td4 = document.createElement('td')
        //赋值。把输入框的内容给到新创建的
        td1.innerHTML = oldTd[0].innerHTML
        td2.innerHTML = ipt[0].value
        td3.innerHTML = ipt[1].checked == true ? '男' : '女'
        td4.innerHTML = ipt[3].value
        //添加到页面
        tr.appendChild(td1)
        tr.appendChild(td2)
        tr.appendChild(td3)
        tr.appendChild(td4)
        tBody.appendChild(tr)
    }
全选
 all.onclick = function () {

        for (var i = 0; i < oldTr.length; i++) {
            //单个check的情况 由全选控制
            check[i].checked = all.checked
        }
    }
删除

    btn[1].οnclick=function(){
        //便利有多少行
        for(var j=0;j<check.length;j++){
            //判断选中的状态
            if(check[j].checked==true){
                oldTr[j].remove()
                //删除之后length减少 要j--
                j--;
            }
        }

    }
    结果如图所示
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210314224917904.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDcwMDAy,size_16,color_FFFFFF,t_70#pic_center)