表格形式展现的添加和删除（日考）

最新推荐文章于 2021-06-17 15:49:13 发布

ch5211314

最新推荐文章于 2021-06-17 15:49:13 发布

阅读量150

点赞数

本文链接：https://blog.csdn.net/ch5211314/article/details/79210879

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>

       <script>

           function tj(){
               var name = document.getElementById("name").value;
               var age = document.getElementById("age").value;
               var per = document.getElementById("per").value;
               var table = document.getElementById("table");

               var tr = document.createElement("tr");
               var td = document.createElement("td");
               var td1 = document.createElement("td");
               var td2 = document.createElement("td");
               var td3 = document.createElement("td");

               td.innerHTML = name;
               td1.innerHTML = age;
               td2.innerHTML = per;

               tr.appendChild(td);
               tr.appendChild(td1);
               tr.appendChild(td2);

               var btnDel = document.createElement("input"); //创建一个input控件
                btnDel.setAttribute("type","button"); //type="button"
                btnDel.setAttribute("value","删除");



                btnDel.onclick = function(){
                    if(confirm("确定要删除这一行嘛？")){
                        this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
                         //btnDel - td - tr - tbody - 删除(tr)
                         //刷新网页还原。实际操作中，还要删除数据库中数据，实现真正删除
                    }
                }

                td3.appendChild(btnDel);

                tr.appendChild(td3);

               table.appendChild(tr);
           }

       </script>

       <style>

           .long{
               width: 1000px;
               height: 60px;
               background: #FFFF00;
           }

       </style>
   </head>
   <body>

       <div class="long">
           姓名:<input type="text" id="name"/>
           年龄:<input type="text" id="age"/>
           生日:<input type="text" id="per"/>
           <input type="button" οnclick="tj()" value="添加"/>
       </div>
       <table width="500px" id="table" border="1">
           <tr>
               <td>姓名</td>
               <td>年龄</td>
               <td>生日</td>
               <td>操作</td>
           </tr>
       </table>
   </body>
</html>

ch5211314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格形式展现的添加和删除（日考）

function tj(){ var name = document.getElementById("name").value; var age = document.getElementById("age").value; var per = document.getElementById("p
复制链接

扫一扫