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>
原文地址：https://www.cnblogs.com/mengzekun/p/10686843.html
时间： 2024-10-12 15:04:25