JavaScript | JSONHTML – Barcelona Geeks

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 Cancelar la respuesta