JavaScript综合案例

5.1、案例效果介绍

  • 在“姓名、年龄、性别”三个文本框中填写信息后，添加到“学生信息表”列表（表格）中。

综合案例-添加功能分析.png

5.2、添加功能的分析

  1. 为添加按钮绑定单击事件。
  2. 创建 tr 元素。
  3. 创建 4 个 td 元素。
  4. 将 td 添加到 tr 中。
  5. 获取文本框输入的信息。
  6. 创建 3 个文本元素。
  7. 将文本元素添加到对应的 td 中。
  8. 创建 a 元素。
  9. 将 a 元素添加到对应的 td 中。
  10. 将 tr 添加到 table 中。

5.3、添加功能的实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>动态表格</title>
  7.     <style>
  8.         table{
  9.             border: 1px solid;
  10.             margin: auto;
  11.             width: 500px;
  12.         }
  14.         td,th{
  15.             text-align: center;
  16.             border: 1px solid;
  17.         }
  18.         div{
  19.             text-align: center;
  20.             margin: 50px;
  21.         }
  22.     </style>
  24. </head>
  25. <body>
  27. <div>
  28.     <input type="text" id="name" placeholder="请输入姓名" autocomplete="off">
  29.     <input type="text" id="age"  placeholder="请输入年龄" autocomplete="off">
  30.     <input type="text" id="gender"  placeholder="请输入性别" autocomplete="off">
  31.     <input type="button" value="添加" id="add">
  32. </div>
  34.     <table id="tb">
  35.         <caption>学生信息表</caption>
  36.         <tr>
  37.             <th>姓名</th>
  38.             <th>年龄</th>
  39.             <th>性别</th>
  40.             <th>操作</th>
  41.         </tr>
  43.         <tr>
  44.             <td>张三</td>
  45.             <td>23</td>
  46.             <td>男</td>
  47.             <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
  48.         </tr>
  50.         <tr>
  51.             <td>李四</td>
  52.             <td>24</td>
  53.             <td>男</td>
  54.             <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
  55.         </tr>
  57.     </table>
  59. </body>
  60. <script>
  61.     //一、添加功能
  62.     //1.为添加按钮绑定单击事件
  63.     document.getElementById("add").onclick = function(){
  64.         //2.创建行元素
  65.         let tr = document.createElement("tr");
  66.         //3.创建4个单元格元素
  67.         let nameTd = document.createElement("td");
  68.         let ageTd = document.createElement("td");
  69.         let genderTd = document.createElement("td");
  70.         let deleteTd = document.createElement("td");
  71.         //4.将td添加到tr中
  72.         tr.appendChild(nameTd);
  73.         tr.appendChild(ageTd);
  74.         tr.appendChild(genderTd);
  75.         tr.appendChild(deleteTd);
  76.         //5.获取输入框的文本信息
  77.         let name = document.getElementById("name").value;
  78.         let age = document.getElementById("age").value;
  79.         let gender = document.getElementById("gender").value;
  80.         //6.根据获取到的信息创建3个文本元素
  81.         let nameText = document.createTextNode(name);
  82.         let ageText = document.createTextNode(age);
  83.         let genderText = document.createTextNode(gender);
  84.         //7.将3个文本元素添加到td中
  85.         nameTd.appendChild(nameText);
  86.         ageTd.appendChild(ageText);
  87.         genderTd.appendChild(genderText);
  88.         //8.创建超链接元素和显示的文本以及添加href属性
  89.         let a = document.createElement("a");
  90.         let aText = document.createTextNode("删除");
  91.         a.setAttribute("href","JavaScript:void(0);");
  92.         a.setAttribute("onclick","drop(this)");
  93.         a.appendChild(aText);
  94.         //9.将超链接元素添加到td中
  95.         deleteTd.appendChild(a);
  96.         //10.获取table元素，将tr添加到table中
  97.         let table = document.getElementById("tb");
  98.         table.appendChild(tr);
  99.     }
  100. </script>
  101. </html>

5.4、删除功能的分析

  • 删除功能介绍

综合案例-删除功能分析.png

  • 删除功能分析
  1. 为每个删除超链接添加单击事件属性。
  2. 定义删除的方法。
  3. 获取 table 元素。
  4. 获取 tr 元素。
  5. 通过 table 删除 tr。

5.5、删除功能的实现

//二、删除的功能
//1.为每个删除超链接标签添加单击事件的属性
//2.定义删除的方法
function drop(obj){
//3.获取table元素
let table = obj.parentElement.parentElement.parentElement;
//4.获取tr元素
let tr = obj.parentElement.parentElement;
//5.通过table删除tr
table.removeChild(tr);
}