JavaScript添加用户小练习

来源：互联网发布：nginx限制返回大小编辑：程序博客网时间：2024/05/22 03:35
<!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 0