En este tutorial crearemos una tabla de generación de multiplicación usando JavaScript. Este código mostrará automáticamente un número multiplicado en una tabla cuando el usuario haga clic en el botón generar. El código usa la función onclick () para llamar a una función específica que muestra dinámicamente una tabla de multiplicación usando bucles for () anidados para pasar a números contables. Siéntase libre de modificarlo y aplicarlo en su sistema, este es un tipo de programa fácil de usar
Usaremos JavaScript como un lenguaje de script del lado del servidor porque brinda un mayor control de su página web y extiende su capacidad de una manera moderna. Está escrito en HTML o como fuente externa para agregar algunas características necesarias en su sitio web.
Empezando:
Primero debe descargar el marco de arranque, este es el enlace para el arranque que utilizamos para el diseño del diseño https://getbootstrap.com/.
La interfaz principal:
Este código contiene la interfaz de la aplicación. Para crear esto, simplemente escriba este bloque de código dentro del editor de texto y guárdelo como index.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<a href="https://compubinario.com" class="navbar-brand">CompuBinario</a>
</div>
</nav>
<div class="col-md-3"></div>
<div class="col-md-6 well">
<h3 class="text-primary">JavaScript - Generar Tabla de Multiplicacion</h3>
<hr style="border-top:1px dotted;"/>
<div class="col-md-3">
<div class="form-group">
<label>Ingrese un Numero</label>
<input type="number" class="form-control" id="input"/>
<br />
<center><button onclick="generateTable()" class="btn btn-primary">Generar</button></center>
</div>
</div>
<div class="col-md-9">
<div>
<table class="table table-bordered">
<thead class="alert-info">
<tr>
<th colspan="10"><center>Tabla of Multiplicacion</center></th>
</tr>
</thead>
<tbody id="result"></tbody>
</table>
</div>
</div>
</body>
</html>
<script src="js/script.js"></script>Crear el script:
Este código contiene el script de la aplicación. Este código mostrará dinámicamente la tabla de multiplicación cuando se haga clic en el botón. Para hacer esto, simplemente copie y escriba este bloque de códigos dentro del editor de texto, luego guárdelo como script.js dentro de la carpeta js.
function generateTable(){
var input = document.getElementById('input').value;
if(input == ""){
alert("Enter some number first");
}else{
var digit = 0;
if(input <= 0){
digit = 1;
document.getElementById('input').value = 1;
}else{
digit = input;
}
var html = "";
for(var i = 1; i <= digit; i++) {
html += "<tr>";
for(var j = 1; j <= 10; j++){
html += "<td>"+i*j+"</td>";
}
html += "</tr>";
}
document.getElementById('result').innerHTML = html;
document.getElementById('result').setAttribute('class', 'alert-warning');
}
}Ahí lo tienes, creamos con éxito una tabla de generación de multiplicación usando JavaScript. Espero que este sencillo tutorial te ayude a lo que estás buscando.
Antes de la descarga del Tutorial presiona el siguiente enlace para que te suscribas a nuestro Canal de YouTube:
