添加和删除表单记录功能

最新推荐文章于 2023-03-03 17:37:46 发布

TomKing9

最新推荐文章于 2023-03-03 17:37:46 发布

阅读量188

点赞数

分类专栏： js学习文章标签： javascript css html

本文链接：https://blog.csdn.net/TomKing9/article/details/116658063

版权

js学习专栏收录该内容

19 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .table1{
            background-color: black;
            margin: 100px auto;
        }
        th,td{
            background-color: white;
        }
        .table2{
            margin: 60px auto;
            padding: 10px 50px 50px 10px;
            border: 1px solid black;
            

        }
        button{
            padding: 0 5px;
            margin: 10px 50%;
        }
    </style>
    <script>
        window.onload = function () {
            let allA = document.getElementsByTagName('a')
            function delA() {
                console.log(this)
                let nameNode = this.parentNode.parentNode
                    let name = nameNode.getElementsByTagName('td')[0].innerHTML
                    let sure = confirm('Do you sure delete '+name)
                    if(sure){
                        nameNode.parentNode.removeChild(nameNode)
                    }
                    return false;
            }
            for(i in allA){
                allA[i].onclick = delA          //这里打上括号就变成不是a调用的了
            }

            let submit = document.getElementById('submit')
            submit.onclick = function() {
            //提交功能
            //获取员工的信息
            let nameIn = document.getElementById('nameIn').value
            let emailIn = document.getElementById('emailIn').value
            let salaryIn = document.getElementById('salaryIn').value
            //创建表单
            //创建4个td单元格，1个单元行
            let tr = document.createElement('tr')
            let nameTd = document.createElement('td')
            let emailTd = document.createElement('td')
            let salaryTd = document.createElement('td')
            let aTd = document.createElement('td')
            //创建a
            let a = document.createElement('a')
            a.href = 'javascript:;'
            //创建文本节点
            let nameTxt = document.createTextNode(nameIn)
            let emailTxt = document.createTextNode(emailIn)
            let salaryTxt = document.createTextNode(salaryIn)
            let delTxt = document.createTextNode('Delete')
            //把文本节点绑定上标签
            nameTd.appendChild(nameTxt)
            emailTd.appendChild(emailTxt)
            salaryTd.appendChild(salaryTxt)
            a.appendChild(delTxt)
            //把a放进td单元格
            aTd.appendChild(a)
            //为新添加的a绑定函数
            a.onclick = delA
            //完善表单,把单元格放进单元行
            tr.appendChild(nameTd)
            tr.appendChild(emailTd)
            tr.appendChild(salaryTd)
            tr.appendChild(aTd)
            //把表单信息提交上去
            let table1 = document.getElementsByClassName('table1')[0]   //操 撒比
            table1.appendChild(tr)
            }
        }
    </script>
</head>
<body>
    <table class="table1">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>zhangsan@qq.com</td>
            <td>10000RMB</td>
            <td><a href="javascript:;">Delete</a></td>
        </tr>
        <tr>
            <td>李四</td>
            <td>zhangsan@qq.com</td>
            <td>10000RMB</td>
            <td><a href="javascript:;">Delete</a></td>
        </tr>
        <tr>
            <td>王五</td>
            <td>zhangsan@qq.com</td>
            <td>10000RMB</td>
            <td><a href="javascript:;">Delete</a></td>
        </tr>
    </table>
    <table class="table2">
        <tr>
            <th>添加新员工</th>
        </tr>
        <tr>
            <td>name:</td>
            <td><input type="text" value="" id="nameIn"></td>
        </tr>
        <tr>
            <td>email:</td>
            <td><input type="text" id="emailIn"></td>
        </tr>
        <tr>
            <td>salary:</td>
            <td><input type="text" id="salaryIn"></td>
        </tr>
        
    </table>
    <button id="submit">Submit</button>
</body>
</html>

效果如图
在这里插入图片描述

TomKing9

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
添加和删除表单记录功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
复制链接

扫一扫