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

最新推荐文章于 2023-08-02 17:26:12 发布

原创最新推荐文章于 2023-08-02 17:26:12 发布 · 184 阅读

CC 4.0 BY-SA版权

本文介绍了一种使用JavaScript操作HTML表格的方法，通过动态添加和删除表格行来展示用户输入的数据，包括姓名、年龄和生日等信息。文章提供了一个简单的示例代码，展示了如何创建这些功能。

<!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" onclick="tj()" value="添加"/>
       </div>
       <table width="500px" id="table" border="1">
           <tr>
               <td>姓名</td>
               <td>年龄</td>
               <td>生日</td>
               <td>操作</td>
           </tr>
       </table>
   </body>
</html>