用js实现增删查改

最新推荐文章于 2024-01-15 00:06:06 发布

TTomcat

最新推荐文章于 2024-01-15 00:06:06 发布

阅读量492

点赞数

文章标签：笔记

本文链接：https://blog.csdn.net/weixin_42464979/article/details/83001392

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript">
           function on(){
               //获得指定元素。
               var usn = document.getElementById("username").value;
               var pwd =document.getElementById("password").value;
               var tb = document.getElementById("tb");
               //tb.appendChild()
               //创建需要添加的元素。
               var tr = document.createElement("tr");
               //创建信息的td.
               var tdInfo = document.createElement("td");
               //创建用来显示的用户名
               var inputusn = document.createElement("input");
               inputusn.setAttribute("type","text");
               inputusn.setAttribute("value",usn);
               inputusn.setAttribute("disabled",true);
               //创建用来显示的用户名。
               var showusn = document.createTextNode("用户名:");
               var showpsw = document.createTextNode("密码:");
               var inputpsw = document.createElement("input");
               inputpsw.setAttribute("type","password");
               inputpsw.setAttribute("value",pwd);
               inputpsw.setAttribute("disabled",true);
               //向tdInfo中添加数据。
               tdInfo.appendChild(showusn);
               tdInfo.appendChild(inputusn);
               tdInfo.appendChild(showpsw);
               tdInfo.appendChild(inputpsw);
               tr.appendChild(tdInfo);
               //tb.appendChild(tr);
               //创建按钮组。
               var tdBtn = document.createElement("td");
               //添加查看按钮。(selectButton , 弹窗显示账号密码。)
               var selectButton = document.createElement("button");
               var selectButtonText = document.createTextNode("查看");
               selectButton.setAttribute("onclick","sel(this)");
               selectButton.appendChild(selectButtonText);
               tdBtn.appendChild(selectButton);
               //点击删除整行元素。添加提示框效果。 confirm...
               var deleteButton = document.createElement("button");
               var deleteButtonText = document.createTextNode("删除");
               deleteButton.setAttribute("onclick","del(this)");
               deleteButton.appendChild(deleteButtonText);
               tdBtn.appendChild(deleteButton);
               //点击修改按钮，可以当前行表单变成可用状态。
               var updateButton = document.createElement("button");
               var deleteButtonText = document.createTextNode("修改");
               updateButton.setAttribute("onclick","upd(this)");
               updateButton.appendChild(deleteButtonText);
               tdBtn.appendChild(updateButton);
               tr.appendChild(tdBtn);
               tb.appendChild(tr);
           }

           function sel(obj){
               //alert("查看");
               //alert(obj.parentNode.previousSibling.innerHTML);
               var childs = obj.parentNode.previousSibling.childNodes;
               alert("用户名是:"+childs[1].value+"密码是:"+childs[3].value);
               //alert(childs.length)
           }
           function del(obj){
               var tb = document.getElementById("tb");
               tb.removeChild(obj.parentNode.parentNode);
           }
           function upd(obj){
               //parentNode 父节点 previousSibling 上一个兄弟节点。 childNodes 所有的子节点集合
               var childs = obj.parentNode.previousSibling.childNodes;
               childs[1].disabled=false;
               childs[3].disabled=false;
           }
       </script>
   </head>
   <body>
       <input type="text" name="username" id="username" value="" />
       <input type="password" name="password" id="password" value="" />
       <input type="button" value="添加" οnclick="on()"/>
       <hr />
       <table id="tb" border="1" >

       </table>
   </body>
</html>