JavaScript | JSONHTML

Tabla HTML: en HTML, las tablas se definen mediante la etiqueta <table> , el encabezado de la tabla se define mediante la etiqueta <th> y, de forma predeterminada, el encabezado de la tabla se coloca en el centro y está en negrita y la fila de la tabla se define mediante <tr> y los datos o información de la fila están definidos por la etiqueta <td> .

El siguiente código muestra la demostración de la tabla HTML:
Código #1:

<!DOCTYPE html>
<html>
<body>
   
<table style="width:50%">
  <tr>
    <th>First_name</th>
    <th>Last_name</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Priya</td>
    <td>Sharma</td>
    <td>24</td>
  </tr>
  <tr>
    <td>Arun</td>
    <td>Singh</td>
    <td>32</td>
  </tr>
  <tr>
    <td>Sam</td>
    <td>Watson</td>
    <td>41</td>
  </tr>
</table>
   
</body>
</html>

Producción:

Tabla HTML dinámica: el método insertRow() coloca un <tr> vacío en la tabla que crea una nueva fila en esa tabla definida. El método deleteRow() se usa para eliminar la fila de la tabla definida

Código #2:

<html>
  
<head>
    <style>
  
    </style>
</head>
  
<body>
    <p>Click the button to perform the function:</p>
    <table id="tablecreate">
        <tr>
            <th>First_Column</th>
            <th>Second_Column</th>
        </tr>
    </table>
    <br>
    <button onclick="create()">Create</button>
  
    <script>
        function create() {
            var table = document.getElementById("tablecreate");
            var row = table.insertRow(0);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            cell1.innerHTML = "New Column-1";
            cell2.innerHTML = "New Column-2";
        }
    </script>
</body>
  
</html>

Salida:
antes de hacer clic en el botón Crear-

Después de hacer clic una vez en el botón Crear-

Después de hacer clic dos veces en el botón Crear-

Lista desplegable HTML: un menú desplegable permite al usuario elegir la opción predefinida. Es básicamente un menú conmutable. Para crear un menú desplegable, necesitamos HTML, CSS y JavaScript básicos.
Nota: Para obtener el resultado completo de este efecto, se deben combinar las tres secciones siguientes.

  • Sección HTML: Las etiquetas <button> , <a> y <p> se utilizan para crear el menú desplegable.
    Ejemplo:
    <div class="dropdown">
      <button onclick="dropdown()" class="dropbtn">Dropdown</button>
      <div id="myDropdown" class="dropdown-content">
        <a href="#">Option 1</a>
        <a href="#">Option 2</a>
      </div>
    </div>
    
    
  • Sección CSS: .dropbtn es un botón para el menú alternable, background-color establece el color del botón, .dropbtn :hover establece el efecto de desplazamiento sobre el botón, posición: relativa; aparecerá el menú desplegable debajo del botón desplegable para mantener el contenido usando .dropdown-content . Ejemplo:
    .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:
    Ejemplo:
    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');
          }
        }
      }
    }
    

Código #3:

<html>
  
<head>
    <style>
        .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;
        }
    </style>
    <script>
        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');
                    }
                }
            }
        }
    </script>
  
</head>
  
<body>
    <p>Click the Dropdown button to see the options:</p>
    <div class="dropdown">
        <button onclick="dropdown()" class="dropbtn">Dropdown</button>
        <div id="myDropdown" class="dropdown-content">
            <a href="#">Option 1</a>
            <a href="#">Option 2</a>
        </div>
    </div>
</body>
  
</html>

Salida:
antes de hacer clic en el botón desplegable-

Después de hacer clic en el botón desplegable-

Publicación traducida automáticamente

Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *