📌  相关文章
📜  JavaScript | JSON HTML

📅  最后修改于: 2021-11-08 05:28:54             🧑  作者: Mango

HTML 表格：在 HTML 中，表格由

标签定义，表格的标题由和行的数据或信息由放入表格中，从而在该定义的表格中创建一个新行。 deleteRow()方法用于从定义的表中删除行

代码#2：


  

    

  

    
Click the button to perform the function:

    
标签定义，默认情况下表格的标题放置在中心，它是粗体的，表格的行由
标签定义。

下面的代码展示了 HTML 表格的演示：
代码#1： 




   

  
    
     
    
  
  
    
    
    
  
  
    
    
    
  
  
    
    
    
  
First_nameLast_nameAge
PriyaSharma24
ArunSingh32
SamWatson41



   

输出：

动态 HTML 表格： insertRow()方法将一个空的

                                                
First_ColumnSecond_Column
    
               

输出：
在单击创建按钮之前 –

一次单击创建按钮后-

两次单击创建按钮后-

HTML 下拉列表：下拉菜单允许用户选择预定义选项。它基本上是一个可切换的菜单。为了创建下拉菜单，我们需要基本的 HTML、CSS 和 JavaScript。
注意：要获得此效果的完整结果，必须将以下三个部分全部结合起来。

  • CSS部分： .dropbtn是可切换菜单的按钮， background-color设置按钮颜色， .dropbtn:hover设置按钮悬停效果， position:relative；将在下拉按钮下出现下拉菜单，以使用.dropdown-content维护内容。
    例子： 
    .dropbtn {
    background-color: white;
    padding: 16px;   
}
.dropbtn:hover, .dropbtn:focus {
    background-color: black;
    color:white;
}
.dropdown {
    position: relative;   
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: grey;
    min-width: 97px;
    overflow: auto;   
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    display: block;   
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
  • JavaScript：
    例子： 
    function dropdown() {
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

    • 代码#3： 

    
  

    
    
  

  

    
    Click the Dropdown button to see the options:
    
    
    
        
        
    
            Option 1
            Option 2
        
    
    
    

  

    输出：
    在单击下拉按钮之前 –

    点击下拉按钮后——