JQuery dynamically adds rows to tables and adds events to new rows _ jquery

JQuery dynamically adds rows to a table and keeps multiple blank rows at the bottom. This prevents too many lines at a time from leading to too much page content and slow response. Functions:

When you edit a table, the number of rows in the table is uncertain. If too many rows are added at a time, the page content may be too large and the response may be slow. This program allows you to dynamically Add rows in the table, always keep multiple blank rows at the bottom.

Effect:

I. original page

Ii. Add a new row in Table 1 and bind timepicker

Iii. Table 2 automatically adds rows and binds timepicker to new rows.

HTML source code:

   
   
     
 
 
 
  
  
 
   
 
    
Header 1
 
    
Header 1
 
    
Header 1
 
   
 
   
 
    
Header 2
 
    
Header 2
 
    
Header 2
 
   
 
  
 
  
  
 
   
 
    
 
 
    
 
 
    
 
 
   
 
   
 
    
 
 
    
 
 
    
 
 
   
 
   
 
    
 
 
    
 
 
    
 
 
   
 
  
 
  
  
 
   
 
    
Table end 1
 
    
Table end 2
 
    
Table end 3
 
   
 
  
 
 
 
 
 
 
 
 
  
  
 
   
 
    
Header 1
 
    
Header 1
 
    
Header 1
 
   
 
   
 
    
Header 2
 
    
Header 2
 
    
Header 2
 
   
 
  
 
  
  
 
   
 
    
 
 
    
 
 
    
 
 
   
 
   
 
    
 
 
    
 
 
    
 
 
   
 
   
 
    
 
 
    
 
 
    
 
 
   
 
  
 
  
  
 
   
 
    
Table end 1
 
    
Table end 2
 
    
Table end 3