JavaScript添加用户小练习

最新推荐文章于 2022-11-04 20:10:47 发布

阅读量564

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/cckevincyh/article/details/53122876

版权

JavaScript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <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" />&nbsp;&nbsp;
            email: <input type="text" name="email" id="email" />&nbsp;&nbsp;
            电话: <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>&nbsp;</th>
                    </tr>
                    <tr>
                        <td>Tom</td>
                        <td>tom@tom.com</td>
                        <td>5000</td>
                        <td><a href="deleteEmp?id=Tom">Delete</a></td>
                    </tr>
                    <tr>
                        <td>Jerry</td>
                        <td>jerry@sohu.com</td>
                        <td>8000</td>
                        <td><a href="deleteEmp?id=Jerry">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" />&nbsp;&nbsp;
            email: <input type="text" name="email" id="email" />&nbsp;&nbsp;
            电话: <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>

这里写图片描述

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript添加用户小练习

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>添
复制链接

扫一扫