在网页中动态地给表格添加一行内容--HTML+CSS+JavaScript

程序员文章站 2022-06-07 14:38:05

效果：现在输入：name: 小明 --> 点击添加按钮添加 ......

需求描述：

   用户在页面上点击按钮,可以把文本框中的数据在表格的新的一行中显示，具体表现如下图：

  如果如果输入框内容有一项为空，弹出对话框‘请将数据填入完全

步骤：

  1.按钮注册单击事件

  2.获取并判断文本框的内容

  4.创建行并添加到tbody中

  5.创建列，并设置内容

  6.把列添加到行中

代码：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>在网页中添加表格</title>
 6     <style>
 7         * {
 8             margin: 0;
 9             padding: 0;
10         }
11 
12          div {
13              width: 400px;
14              margin: 100px auto;
15          }
16         table {
17             margin-top: 10px;
18             width: 400px;
19             border: 2px solid #000;
20             border-collapse: collapse;
21         }
22         table thead tr {
23             background-color: purple;
24             color: #e0e0e0;
25         }
26 
27         table tr {
28             background-color: pink;
29         }
30 
31         table td {
32             text-align: center;
33             border:1px solid #000 ;
34         }
35 
36         table td:nth-child(1){
37             width: 100px;
38         }
39 
40         table td:nth-child(2){
41             width: 300px;
42         }
43     </style>
44 </head>
45 <body>
46 <div>
47     <label for="">请输入姓名：</label>
48     <input type="text" class="uname"><br />
49     <label for="">请输入邮箱：</label>
50     <input type="email" class="email"><br />
51     <button>添加</button><br />
52     <table>
53         <thead>
54         <tr>
55             <td>姓名</td>
56             <td>邮箱</td>
57         </tr>
58         </thead>
59         <tbody>
60             <!--    动态添加内容  -->
61         </tbody>
62     </table>
63 </div>
64 
65 <script>
66     // 获取元素
67     var uname = document.queryselector('.uname');
68     var email = document.queryselector('.email');
69     var btn = document.queryselector('button');
70     var tbody = document.queryselector('tbody');
71 
72     btn.onclick =function () {
73         //检测输入的内容不为空
74         if(uname.value === '' || email.value === '')
75             alert('请输入内容');
76         else {
77             //创建节点
78             var tr = document.createelement('tr');
79             var td1 = document.createelement('td');
80             var td2 = document.createelement('td');
81             //获取元素内容
82             td1.innerhtml = uname.value;
83             td2.innerhtml = email.value;
84             //添加内容到表格中
85             tr.append(td1);
86             tr.append(td2);
87             tbody.append(tr);
88         }
89     }
90 </script>
91 
92 </body>
93 </html>

效果：

现在输入：name: 小明　　--> 点击添加按钮添加

在网页中动态地给表格添加一行内容--HTML+CSS+JavaScript

上一篇：每个程序员都需要学习 JavaScript 的7个理由小结

下一篇：符号表-定长数组实现符号表