📜  如何使用 JavaScript 使 HTML 表格在点击时展开?

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

可扩展的表格可以通过使用 JavaScript 和 HTML 来实现。通过单击表格的一行,它会展开并弹出一个子表格。当用户再次单击该行时,内容将隐藏。当数据复杂但又相互关联时,这会非常有用。

示例 1:以下示例是使用 HTML、CSS 和 JQuery 实现的。它显示了在一个组织中工作的多个人的年龄、薪水和工作数据。通过单击该行,表格将展开并显示有关该特定员工的描述。

html


  

    
    
    
    
  
    
  
    

  

    
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
NameAgeSalaryJob
Person-12460000Computer Programmer
                    Person-1 is 24 years old and                      he is a computer programmer                      he earns 60000 per month                 
Person-225100000Web Designer
                    Person-2 is 25 years old and                      she is a web designer she earns                      100000 per month                 
Person-33590000Cyber Security Expert
                    Person is 35 years old and he                      is a cyber security expert he                      earns 90000 per month                 
Person-452200000Content Writer
                    Person-4 is 52 years old and he                      is a content writer he earns                      200000 per month                 
Person-538400000Chief Executive
                    Person-5 is 38 years old and he                      is chief executive he earns                      400000 per month                 
    
  


html


  

    Expandable Table
  
    
    
    
    
    
                 
    
                  


输出:

示例 2:以下示例是使用 HTML、CSS 和 JQuery 实现的。在此表中,显示了多个酒店的损益。通过单击任何加号,将显示一个子表,其中显示了酒店在三个不同城市的收入。

html



  

    Expandable Table
  
    
    
    
    
    
                 
    
                  

输出: