如何在 jQuery 表中的某个索引处插入新行？

给定一个包含表格的 HTML 文档。任务是使用 JQuery 在该表中的某个索引处插入一个新行。

方法：

• 将表列值 元素存储到变量中。
• 然后使用eq() 和 after() 方法在表中插入行。

示例 1：在此示例中，该行插入到索引 1（硬编码）处。

 
 
     
         
            Insert new row at a certain index
            in a table using jQuery
         
          
        
        
          
        
            #myCol {
                background:green;
            }
            table {
                color:white;
            }
            #Geek_p {
                color:green;
                font-size:30px;
            }
            td {
                padding:10px;
            }
        
    
      
     
            
         
            GeeksForGeeks 
         
          
        
            Click on the button to insert
            a new row in the table
        
          
        
          
        
                                                        
              
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
        


S.NoTitleGeek_idGeek_1GeekForGeeksGeek_id_1Geek_3GeeksForGeeksGeek_id_3
        
          
         
            Click here
         
          
        
         
            function Geeks() {
                var html = 
                "<td>Geek_2</td><td>GeeksForGeeks</td><th>Geek_id_2</th>";
                  
                $('table > tbody > tr').eq(1).after(html);
            }
         
        
     
                    

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

示例 2：在此示例中，该行插入到用户提供的索引处。

 
 
     
         
            Insert new row at a certain index
            in a table using jQuery
         
          
        
        
          
        
            #myCol {
                background:green;
            }
            table {
                color:white;
            }
            #Geek_p {
                color:green;
                font-size:30px;
            }
            td {
                padding:10px;
            }
        
    
      
     
            
         
            GeeksForGeeks 
         
          
        
            Click on the button to insert
            a new row in the table
        
          
        
          
        
                                                        
              
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
        


S.NoTitleGeek_idGeek_1GeekForGeeksGeek_id_1Geek_3GeeksForGeeksGeek_id_3
        
          
         
            Click here
         
          
        
         
            function Geeks() {
                var i = 2;
                var html = 
                "<td>Geek_2</td><td>GeeksForGeeks</td><th>Geek_id_2</th>";
                  
                $('table > tbody > tr').eq(i - 1).after(html);
            }
         
        
     
                    

输出：

• 在点击按钮之前：
  
• 点击按钮后：