tabla1.html

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <meta charset="UTF-8">
  4. <title>Tabla</title>
  5.  
  6. /*
  7. Es muy desaconsejable crear una única función que lo haga todo.
  8. El código es más difícil de entender y de corregir.
  9. Tiene muchas repeticiones.
  10. Se reciclan variables para repetir varias veces la misma tarea o
  11. se usan para tareas muy distintas.
  12. Tiene muchos comentarios para intentar clarificarlo.
  13. */
  14.  
  15. function crearTabla() {
  16. const MINIMO = -100;
  17. const MAXIMO = 1000;
  18.  
  19. // Borrar tabla anterior si había alguna
  20. let table = document.querySelector('#contenedor table');
  21. if (table != null) {
  22. table.parentElement.removeChild(table);
  23. }
  24.  
  25. // Crear una nueva tabla
  26. table = document.createElement('table');
  27. table.setAttribute('border', 1);
  28.  
  29. // Agregar títulos a la tabla
  30. let tr = document.createElement('tr');
  31. tr.innerHTML = '<th>Operando 1</th><th>Operando 2</th><th>Suma</th><th>Resta</th><th>Producto</th><th>División</th><th>Módulo</th>';
  32. table.appendChild(tr);
  33.  
  34. // Obtener el número de filas
  35. const input = document.querySelector('#num_filas');
  36. let numFilas = parseInt(input.value) || 0;
  37. if (numFilas < 1) numFilas = 1;
  38. else if (numFilas > 100) numFilas = 100;
  39.  
  40. // Agregar filas a la tabla
  41. for (let i = 0; i < numFilas; i++) {
  42.  
  43. // Crear la fila de la tabla
  44. tr = document.createElement('tr');
  45.  
  46. // Calcular dos números aleatorios
  47. const numero1 = MINIMO + Math.floor(Math.random()*(MAXIMO - MINIMO + 1));
  48. const numero2 = MINIMO + Math.floor(Math.random()*(MAXIMO - MINIMO + 1));
  49.  
  50. // Crear todas las celdas
  51.  
  52. let td = document.createElement('td');
  53. td.textContent = numero1;
  54. tr.appendChild(td);
  55.  
  56. td = document.createElement('td');
  57. td.textContent = numero2;
  58. tr.appendChild(td);
  59.  
  60. td = document.createElement('td');
  61. td.textContent = numero1 + numero2;
  62. tr.appendChild(td);
  63.  
  64. td = document.createElement('td');
  65. td.textContent = numero1 - numero2;
  66. tr.appendChild(td);
  67.  
  68. td = document.createElement('td');
  69. td.textContent = numero1 * numero2;
  70. tr.appendChild(td);
  71.  
  72. td = document.createElement('td');
  73. td.textContent = numero1 / numero2;
  74. tr.appendChild(td);
  75.  
  76. td = document.createElement('td');
  77. td.textContent = numero1 % numero2;
  78. tr.appendChild(td);
  79.  
  80. table.appendChild(tr);
  81. }
  82.  
  83. // Agregar la tabla al contenedor
  84. document.querySelector('#contenedor').appendChild(table);
  85. }
  86.  
  87. </script>
  88. table { border-collapse:collapse; }
  89. td { text-align:right; }
  90. </style>
  91. </head>
  92. <h1>Tabla de operaciones aritméticas</h1>
  93. <p>
  94. <label for="num_filas">Número de filas:</label>
  95. <input type="number" id="num_filas">
  96. <button onclick="crearTabla()">Crear</button>
  97. </p>
  98. <div id="contenedor">
  99. <table><tr><td>Una sóla celda</td></tr></table>
  100. </div>
  101. <p>
  102. Hoy es lunes 17 de junio de MMXIX
  103. </p>
  104. </body>
  105. </html>
  106.  

Proinf.net