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>