JavaScript的增删改功能

最新推荐文章于 2022-11-15 19:17:48 发布

热带雨林的竹笋

最新推荐文章于 2022-11-15 19:17:48 发布

阅读量166

点赞数 1

分类专栏：实用的javascript 文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_51710069/article/details/116354641

版权

实用的javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

javascript 第一次学到的dom(文件)增删，自学的话大概流程就是先会css+html 制作一个实验图效果如图所示
在这里插入图片描述
即点击删除（javascript操作了）就是删除信息，点击submite就是提交信息到上面表格里面，首先就是单击绑定函数（这个是基本，要掌握）。其次就是操作了。创建元素document.createElement,什么get获取元素啊这些，这些都是可以通过百度查文档得到的。注意我里面有些return false 这是关键哦，取消连接，取消跳转这些。不然可能会闪窗，失效哦。

<!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>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
    table{
          
           margin: 100px auto;
           /* border: 1px solid ; */
           text-align: center;  
    }
    form{

        width: 500px;
        height: 250px;
        border: 1px solid red;
        margin: 100px auto;
       text-align: center;
       }
   form input{

       width: 200px;

    }
    </style>

      <script>

function Dela() {
                   //点击超链接，点那删哪；
                  //这里点击谁，this 就是谁
                  //我们要删 tr 所以先找tr，然后利用他的父亲.removeChild 把自己删了
                  var tr = this.parentNode.parentNode;
                       //删除前弹提示框；
                       var name = tr.getElementsByTagName("td")[0].innerHTML;
                       
                       var flag = confirm("确定删除"+name+"吗？");
                     //confirm （）用于弹出一个确认或者取消的提示框

                     if(flag==true)
                     {
                        tr.parentNode.removeChild(tr);
                     }
                       return false;//取消连接的的跳转
             }
    
            window.onload = function(){
                    /* 
                     点击超链接删除
                    */
               var Alla = document.getElementsByTagName("a");
       
               //绑定超链接
               for(var i=0; i<Alla.length; i++)
               {
                   Alla[i].onclick = Dela;
               }
              

               var  addbtn = document.getElementById("addbtn");

                        addbtn.onclick = function(){  
                       //获取员工的名字
                       var name = document.getElementById("name").value;
                       //就是某某.value
                       var emile = document.getElementById("emile").value;

                       var salary = document.getElementById("salary").value;

                     var tr = document.createElement("tr");


                        tr.innerHTML = "<td>"+name+"</td>"+ 
                                    "<td>"+emile+"</td>"+ 
                                    "<td>"+salary+"</td>"+
                                    "<td><a href  = '#' >Delete</a></td>";

                    var employ = document.getElementById("employ");

                    var tbody = employ.getElementsByTagName("tbody")[0];

                    tbody.appendChild(tr);

                  var a  =  tr.getElementsByTagName("a")[0];//把刚刚添加的啊获取出来

                  a.onclick = Dela;
                  return false;//这个是取消表单的跳转 ，不然加不上去
                 }                 
            }
      </script>

</head>
<body>
    
      <table id="employ" border="1"  cellspacing = "0" >
        <thead>
             <tr>
               <th>name</th>
               <th>emile</th>
               <th>salary</th>
               <th>&nbsp;</th>
             </tr>  
            </thead>
            <tbody>
             <tr>
               <td>Tom</td>
               <td>tom163784368</td>
               <td>6777</td>
               <td><a href="#">Delete</a></td>

            </tr>
            <tr>
                <td>Uom</td>
                <td>dsff432368</td>
                <td>3442</td>
                <td><a href="#">Delete</a></td>
             </tr>
             <tr>
                <td>GGdjdhh</td>
                <td>trye7r6448</td>
                <td>9977</td>
                <td><a href="#">Delete</a></td>   
             </tr>
            </tbody>

      </table>

      <form action="" >
           <h3>添加新员工</h3>
           <br><br>
           name:  <input type="text" placeholder="name" id = "name">
           <br>
           <br>
           emile:  <input type="text" placeholder="emile" id="emile">
           <br>
           <br>
         salary:    <input type="text" placeholder="salary" id="salary">
         <br>
         <br>
                  <button id="addbtn"> Submite</button>
      </form>

</body>
</html>

在这里插入图片描述
这里面弹窗确认就是用了confirm函数的哦。这样使得人机交互更好的哦。

热带雨林的竹笋

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的增删改功能

javascript 第一次学到的dom(文件)增删，自学的话大概流程就是先会css+html 制作一个实验图效果如图所示即点击删除（javascript操作了）就是删除信息，点击submite就是提交信息到上面表格里面，首先就是单击绑定函数（这个是基本，要掌握）。其次就是操作了。创建元素document.createElement,什么get获取元素啊这些，这些都是可以通过百度查文档得到的。注意我里面有些return false 这是关键哦，取消连接，取消跳转这些。不然可能会闪窗，失效哦。<!
复制链接

扫一扫