📌  相关文章
📜  如何使用 jQuery 计算表中的行数和列数?

📅  最后修改于: 2021-11-08 06:11:33             🧑  作者: Mango

给定一个包含表格的 HTML 文档,任务是使用 JQuery 计算该表格中的行数和列数。

方法: length 属性用于使用jQuery 计算HTML 表格中的行数和列数。用于在 HTML 表格中查找行数和列数的选择器是:

  • 为了计算行数,使用了“#Table_Id tr”选择器。它选择表中的所有 元素。这包括包含表格标题的行。 length 属性用于所选元素以获取行数。
  • 为了计算列数,使用了“#Table_Id tr th”选择器。它选择嵌套在表中 元素中的所有 元素。 length 属性用于所选元素以获取列数。

示例 1:在此示例中,计算行数。

HTML
 
 
   
     
      Count Number of Rows and Columns in 
      a Table Using jQuery.
     
  
     
   
  
   
    
            

          GeeksForGeeks        

                     Count Number of Rows in          a Table Using jQuery                  

                                                                                                                                                                                                                                                               
S.NoTitleGeek_id
Geek_1GeekForGeeksGeek_id_1
Geek_2GeeksForGeeksGeek_id_2
        
                                   
     


HTML
 
 
   
     
      Count Number of Rows and Columns in 
      a Table Using jQuery.
     
  
     
   
  
   
    
            

          GeeksForGeeks        

                     Count Number of Columns in          a Table Using jQuery                  

                                                                                                                                                                                                                                                                                                                                 
S.NoTitleGeek_id
Geek_1GeekForGeeksGeek_id_1
Geek_2GeeksForGeeksGeek_id_2
Geek_3GeeksForGeeksGeek_id_3
        
                                   
     


输出:

  • 在点击按钮之前:

  • 点击按钮后:

示例 2:在此示例中,计算列数。

HTML

 
 
   
     
      Count Number of Rows and Columns in 
      a Table Using jQuery.
     
  
     
   
  
   
    
            

          GeeksForGeeks        

                     Count Number of Columns in          a Table Using jQuery                  

                                                                                                                                                                                                                                                                                                                                 
S.NoTitleGeek_id
Geek_1GeekForGeeksGeek_id_1
Geek_2GeeksForGeeksGeek_id_2
Geek_3GeeksForGeeksGeek_id_3
        
                                   
                           

输出:

  • 在点击按钮之前:

  • 点击按钮后:

jQuery 是一个开源 JavaScript 库,它简化了 HTML/CSS 文档之间的交互,它以其“少写,多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。