用js实现表格的增删改

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7         <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8         <title>Document</title>
  9         <style>
 10             table {
 11                 table-layout: fixed;
 12                 width: 500px;
 13             }
 14             td {
 15                 width: 80px;
 16                 text-align: center;
 17             }
 18         </style>
 19     </head>
 20 
 21     <body>
 22         <label>
 23         姓名 <input type="text" id="username">
 24     </label>
 25         <br>
 26         <label>
 27         年龄 <input type="text" id="age">
 28     </label>
 29         <br>
 30         <label>
 31         签名 <input type="text" id="sign">
 32     </label>
 33         <br>
 34         <button id="btn">增加</button>
 35 
 36         <table border=1 id="tab">
 37             <thead>
 38                 <tr>
 39                     <th>姓名</th>
 40                     <th>年龄</th>
 41                     <th>签名</th>
 42                     <th>操作</th>
 43                 </tr>
 44             </thead>
 45             <tbody>
 46                 <tbody>
 47                 <tr>
 48                     <td>111</td>
 49                     <td>222</td>
 50                     <td>333</td>
 51                     <td>
 52                         <a href="##" class="del">删除</a>
 53                     </td>
 54                 </tr>
 55                 <tr>
 56                     <td>111</td>
 57                     <td>222</td>
 58                     <td>333</td>
 59                     <td>
 60                         <a href="##" class="del">删除</a>
 61                     </td>
 62                 </tr>
 63                 <tr>
 64                     <td>111</td>
 65                     <td>222</td>
 66                     <td>333</td>
 67                     <td>
 68                         <a href="##" class="del">删除</a>
 69                     </td>
 70                 </tr>
 71             </tbody>
 72             </tbody>
 73             
 74         </table>
 75     </body>
 76 
 77 </html>
 78 <script>
 79     var username = document.getElementById("username");
 80     var age = document.getElementById("age");
 81     var sign = document.getElementById("sign");
 82     var obtn = document.getElementById("btn");
 83     var otab = document.getElementById("tab");
 84     var tbody = document.querySelector("#tab>tbody")
 85     btn.onclick = function(){
 86         var userval = username.value;
 87         var ageavl = age.value;
 88         var signval = sign.value;
 89         var tr = "<tr><td>"+userval+"</td><td>"+ageavl+"</td><td>"+signval+"</td><td><a href='##' class='del'>删除</a></td></tr>";
 90         tbody.innerHTML += tr;
 91     }
 92     otab.onclick = function(e){
 93         var e = e|| event;
 94         var target = e.target || e.srcElement;
 95         if(target.tagName == "A" && target.className == "del"){
 96             target.parentNode.parentNode.remove();
 97         }
 98         if(target.tagName == 'TD'){
 99             var tdtext = target.innerText;
100             var input = document.createElement("input");
101             input.value = tdtext;
102             target.innerText = "";
103             target.appendChild(input);
104             
105             input.onblur = function(){
106                 var val = this.value;
107                 input.parentNode.innerText = val;
108                 input.remove();
109             }
110         }
111     }
112 </script>
用js实现表格的增删改

猜你喜欢
