JS实现列表的增加和删除功能

最新推荐文章于 2024-06-28 22:29:47 发布

大前端圈

最新推荐文章于 2024-06-28 22:29:47 发布

阅读量1.2w

点赞数 4

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

本文链接：https://blog.csdn.net/wk843620202/article/details/52768331

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

JS实现列表的增加和删除功能，需求如下：

输入姓名，email，电话，点击提交，添加到下面的列表中，如下：

这个主要是练习javascript的DOM操作，实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>添加用户</title>
</head>
<body>
<center>
    <br><br>
    添加用户:<br><br>
    姓名: <input type="text" name="name" id="name" />  email: <input type="text" name="email" id="email" />  电话: <input type="text" name="tel" id="tel" /><br><br>
    <button id="addUser">提交</button>
    <br><br>
    <hr>
    <br><br>
    <table id="usertable" border="1" cellpadding="5" cellspacing=0>
        <tbody>
        <tr>
            <th>姓名</th>
            <th>email</th>
            <th>电话</th>
            <th> </th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="deleteEmp?id=Tom">Delete</a></td>
        </tr>
        </tbody>
    </table>
</center>
</body>

<script language="JavaScript">
    //1 按钮的onclick事件
    //<button id="addUser">提交</button>
    document.getElementById("addUser").onclick = function(){
        //2 获取上面三个文本框的值
        /*
         * 姓名: <input type="text" name="name" id="name" />  
         email: <input type="text" name="email" id="email" />  
         电话: <input type="text" name="tel" id="tel" /><br><br>
         */
        var nameValue = document.getElementById("name").value;
        var emailValue = document.getElementById("email").value;
        var telValue = document.getElementById("tel").value;

        //3 插入到下面的table中
        /*
         * <tr>
         <td>Jerry</td>
         <td>jerry@sohu.com</td>
         <td>8000</td>
         <td><a href="deleteEmp?id=Jerry">Delete</a></td>
         </tr>
         */
        var tr = document.createElement("tr");

        var nameTd = document.createElement("td");
        var nameText = document.createTextNode(nameValue);
        nameTd.appendChild(nameText);

        var emailTd = document.createElement("td");
        var emailText = document.createTextNode(emailValue);
        emailTd.appendChild(emailText);

        var telTd = document.createElement("td");
        var telText = document.createTextNode(telValue);
        telTd.appendChild(telText);

        var aTd = document.createElement("td");
        var a = document.createElement("a");
        a.setAttribute("href","deleteEmp?id="+nameValue);
        var aText = document.createTextNode("Delete");
        a.appendChild(aText);
        aTd.appendChild(a);

        tr.appendChild(nameTd);
        tr.appendChild(emailTd);
        tr.appendChild(telTd);
        tr.appendChild(aTd);

        var table = document.getElementById("usertable");

        //原因：因为火狐及其他浏览器，在页面中查找不到tbody标签
        var tbody = document.createElement("tbody");

        tbody.appendChild(tr);
        table.appendChild(tbody);

        a.onclick = function(){
            /*
             * <tr>
             <td>Jerry</td>
             <td>jerry@sohu.com</td>
             <td>8000</td>
             <td><a href="deleteEmp?id=Jerry">Delete</a></td>
             </tr>
             */
            var trElement = a.parentNode.parentNode;

            var nameElement = trElement.firstChild.firstChild.nodeValue;

            var flag = window.confirm("你确认要删除"+nameElement+"这个用户吗?");

            if(!flag){
                //取消
                /*
                 * 	* 禁止页面刷新
                 * 	* 实际上，在页面中无论你是否有提交页面的动作，页面都会提交。
                 * 		导致页面提交没有设置提交页面，导致错误404 找不到页面。
                 * 	* return false的作用就是不让页面自动提交。
                 */
                return false;
            }else{
                //确认
                var parentElement = trElement.parentNode;

                parentElement.removeChild(trElement);

                return false;
            }
        }
    }

</script>

</html>

大前端圈

关注

4
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
JS实现列表的增加和删除功能

JS实现列表的增加和删除功能，需求如下：输入姓名，email，电话，点击提交，添加到下面的列表中，如下：这个主要是练习javascript的DOM操作，实现代码如下：添加用户添加用户: 姓名: email: 电话: 提交
复制链接

扫一扫

专栏目录