Dynamically added to form a single line --HTML + CSS + JavaScript in the page

Description of Requirement: 

   the user clicks the button on the page, the data can be displayed in a new text box of the row in the table, the specific performance in the following figure: 

  If the content if there is a input box is empty, the pop-up dialog box 'Please fill in the data complete

Step: 

  1. button click event register 

  2. Obtain and determine the content of the text box 

  4. tbody created and added to the rows 

  5. Create a column, and of setting 

  6. added to the column lines 

of code:

 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>
the uname = document.querySelector ( '. The uname'var67Get element//66     
     );
 68      var In Email document.querySelector = ( 'In Email.' );
 69      var BTN = document.querySelector ( 'Button' );
 70      var tbody = document.querySelector ( 'tbody' );
 71 is  
72      btn.onclick = function ( ) {
 73          // content is not empty detection input 
74          IF (uname.value === '' || email.value === '' )
 75              Alert ( 'enter content' );
 76          the else {
 77              // Create a node 
78              var TR = document.createElement ( 'TR' );
79              Var= document.createElement the td1 ( 'TD' );
 80              var TD2 = document.createElement ( 'TD' );
 81              // Get content elements 
82              td1.innerHTML = uname.value;
 83              td2.innerHTML = email.value;
 84              / / add content to the table 
85              tr.append (the td1);
 86              tr.append (TD2);
 87              tbody.append (TR);
 88          }
 89      }
 90 </ Script>
 91 is  
92 </ body>
 93 </ HTML>

effect:

Now enter: name: Xiao Ming -> Click the Add button

Dynamically added to form a single line --HTML + CSS + JavaScript in the page

Guess you like