js_节点操作（简单的添加删除）

  1 <!DOCTYPE html>
  2 <html lang="en">
  3   <head>
  4     <meta charset="UTF-8" />
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6     <title>Document</title>
  7     <style>
  8       table {
  9         width: 500px;
 10         border: 1px solid #eeeeee;
 11         text-align: center;
 12       }
 13       thead {
 14         background-color: orange;
 15       }
 16       td {
 17         border: 1px solid #eeeeee;
 18       }
 19     </style>
 20   </head>
 21   <body>
 22     <div class="box">
 23       <label for="">姓名</label><input id="name" type="text" /><br />
 24       <label for="">科目</label><input id="score" type="text" /><br />
 25       <label for="">成绩</label><input id="subject" type="text" />
 26       <button>提交</button>
 27     </div>
 28     <table cellspacing="0" ; cellpadding="0">
 29       <thead>
 30         <tr>
 31           <th>姓名</th>
 32           <th>科目</th>
 33           <th>成绩</th>
 34           <th>操作</th>
 35         </tr>
 36       </thead>
 37       <tbody></tbody>
 38     </table>
 39     <script>
 40       var tbody = document.querySelector('tbody')
 41       var btn = document.querySelector('button')
 42       var obj = {}
 43       var data = [
 44         {
 45           name: '张三',
 46           subject: 'javascript',
 47           score: 80,
 48         },
 49       ]
 50       //添加点击添加事件
 51       btn.onclick = function () {
 52         var name = document.querySelector('#name')
 53         var score = document.querySelector('#score')
 54         var subject = document.querySelector('#subject')
 55         var tr = document.createElement('tr')
 56         tbody.appendChild(tr)
 57         var td1 = document.createElement('td')
 58         var td2 = document.createElement('td')
 59         var td3 = document.createElement('td')
 60         var td4 = document.createElement('td')
 61         tr.appendChild(td1)
 62         tr.appendChild(td2)
 63         tr.appendChild(td3)
 64         tr.appendChild(td4)
 65         td1.innerHTML = name.value
 66         td2.innerHTML = score.value
 67         td3.innerHTML = subject.value
 68         td4.innerHTML = '<a href ="javascript:;">删除</a>'
 69         //将输入的数据保存到集合中
 70         obj.name = name.value
 71         obj.subject = subject.value
 72         obj.score = score.value
 73         //将集合中的数据推到数组中去；
 74         data.push(obj)
 75         //清空输入框中的数据；
 76         name.value = ''
 77         score.value = ''
 78         subject.value = ''
 79         //添加后，调用删除函数，自动循环获取每个a标签的数量
 80         del()
 81       }
 82       //读取data中的数据
 83       for (var i = 0; i < data.length; i++) {
 84         var tr = document.createElement('tr')
 85         tbody.appendChild(tr)
 86         //读取数组中，每个集合中的数据
 87         for (var k in data[i]) {
 88           var td = document.createElement('td')
 89           td.innerHTML = data[i][k]
 90           tr.appendChild(td)
 91         }
 92         var td = document.createElement('td')
 93         tr.appendChild(td)
 94         td.innerHTML = '<a href = "javascript:;">删除</a>'
 95         //调用删除函数，循环获取每个a标签的数量
 96         del()
 97       }
 98       //删除函数封装
 99       function del() {
100         var as = tbody.querySelectorAll('a')
101         for (let i = 0; i < as.length; i++) {
102           as[i].onclick = function () {
103             tbody.removeChild(this.parentNode.parentNode)
104           }
105         }
106       }
107     </script>
108   </body>
109 </html>
posted @ 2020-09-04 15:17 unfetteredman 阅读(263) 评论(0) 收藏举报
刷新页面返回顶部