JavaScript对对表格的操作

最新推荐文章于 2024-08-06 14:22:08 发布

m0_51231194

最新推荐文章于 2024-08-06 14:22:08 发布

阅读量94

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_51231194/article/details/121601983

版权

这个博客展示了如何使用HTML、CSS和JavaScript实现一个简单的用户输入表单，当用户填写姓名、电话和职位并点击添加按钮后，这些信息会被添加到表格中。同时，提供了删除行的功能，用户可以通过点击表格内的删除链接来移除已添加的数据。

摘要由CSDN通过智能技术生成

<!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>表格的更改</title>
    <style>
        html,body{
            margin: 0px;
        }
        .container{
            width: 80%;
            height: 700px;
            /* background-color: #888888; */
            margin: auto;
        }
        .header{
            text-align: center;
            width: 100%;
            height: 120px;
            background-color: pink;
        }
        .bodyer{
            margin-top: 20px;
            height: 500px;
            background-color: brown;
            /* text-align: center; */
        }
        .bodyer table{
            margin: auto;
        }
        th{
            width: 120px;
            height: 30px;
            background:yellow;
        }
        tr{
            background-color: chartreuse;
            font-size: 20px;
            width: 120px;
            height: 40px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class = header>
            <br>
            <br>
            <!-- onblur 光标移动到此位置的时候 -->
            <input type="text" id = "name" onblur="fuZhi()">
            <input type="text" id = "phone" onblur="fuZhi()">
            <input type="text" id = "job" onblur="fuZhi()"> 
            <button onclick="add()">添加</button>
        </div>
        <div class = "bodyer">
            <table class="biao" >
                <thead><th>姓名</th><th>电话</th><th>职位</th><th>操作</th></thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <script >
            var name;
            var phone;
            var job;
            var index = 0;
            function add(){
                var jia = document.createElement("tr");
                jia.innerHTML = "<td >"+name+"</td><td>"+phone+"</td><td>"+job+"</td><td><a herf='#'οnclick= 'del(this)'>删除</a></td>";
                document.getElementsByTagName("tbody")[0].appendChild(jia);
                console.log(document.getElementById("biao"));
            }
            function fuZhi(){
                name = document.getElementById("name").value;
                phone = document.getElementById("phone").value;
                job = document.getElementById("job").value;
            }
            function del(d){
                d.parentNode.parentNode.remove();
            }
        </script>
    </div>
</body>
</html>