tabla.html

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <meta charset="UTF-8">
  4. <title>Tabla</title>
  5.  
  6. /*
  7. Es mejor tener muchos problemas pequeños que uno muy grande.
  8.  
  9. Es más fácil entender y mantener funciones con pocas línea de código que
  10. una función con muchísimas líneas de código.
  11.  
  12. El código se lee de lo general a lo particular y
  13. se lee de arriba hacia abajo.
  14. */
  15.  
  16. function crearTabla() {
  17. borrarTablaAnterior();
  18. crearNuevaTabla();
  19. }
  20.  
  21. function borrarTablaAnterior() {
  22. const table = document.querySelector('#contenedor table');
  23. if (table != null) {
  24. table.parentElement.removeChild(table);
  25. }
  26. }
  27.  
  28. function crearNuevaTabla() {
  29. const table = document.createElement('table');
  30. table.setAttribute('border', 1);
  31. agregarTitulosTabla(table);
  32. agregarFilasTabla(table);
  33. agregarTablaAlContenedor(table);
  34. }
  35.  
  36. function agregarTitulosTabla(table) {
  37. const tr = document.createElement('tr');
  38. 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>';
  39. table.appendChild(tr);
  40. }
  41.  
  42. function agregarFilasTabla(table) {
  43. const numFilas = obtenerNumeroFilas();
  44. for (let i = 0; i < numFilas; i++) {
  45. const tr = crearFilaTabla();
  46. table.appendChild(tr);
  47. }
  48. }
  49.  
  50. function obtenerNumeroFilas() {
  51. const input = document.querySelector('#num_filas');
  52. let valor = parseInt(input.value) || 0;
  53. if (valor < 1) valor = 1;
  54. else if (valor > 100) valor = 100;
  55. return valor;
  56. }
  57.  
  58. /*
  59. Procrastinación es deja para mañana lo que puedas hacer hoy
  60. No resuelvas ahora todo el problema: delégalo en futuras funciones a implementar
  61. */
  62.  
  63. function crearFilaTabla() {
  64. const tr = document.createElement('tr');
  65. const numero1 = obtenerNumeroAleatorio();
  66. const numero2 = obtenerNumeroAleatorio();
  67. tr.appendChild(crearCelda(numero1));
  68. tr.appendChild(crearCelda(numero2));
  69. tr.appendChild(crearCelda(numero1 + numero2));
  70. tr.appendChild(crearCelda(numero1 - numero2));
  71. tr.appendChild(crearCelda(numero1 * numero2));
  72. tr.appendChild(crearCelda(numero1 / numero2));
  73. tr.appendChild(crearCelda(numero1 % numero2));
  74. return tr;
  75. }
  76.  
  77. function obtenerNumeroAleatorio() {
  78. const MINIMO = -100;
  79. const MAXIMO = 1000;
  80. return MINIMO + Math.floor(Math.random()*(MAXIMO - MINIMO + 1));
  81. }
  82.  
  83. function crearCelda(contenido) {
  84. const td = document.createElement('td');
  85. td.textContent = contenido;
  86. return td;
  87. }
  88.  
  89. function agregarTablaAlContenedor(table) {
  90. document.querySelector('#contenedor').appendChild(table);
  91. }
  92.  
  93. </script>
  94. table { border-collapse:collapse; }
  95. td { text-align:right; }
  96. </style>
  97. </head>
  98. <h1>Tabla de operaciones aritméticas</h1>
  99. <p>
  100. <label for="num_filas">Número de filas:</label>
  101. <input type="number" id="num_filas">
  102. <button onclick="crearTabla()">Crear</button>
  103. </p>
  104. <div id="contenedor">
  105. <table><tr><td>Una sóla celda</td></tr></table>
  106. </div>
  107. <p>
  108. Hoy es lunes 17 de junio de MMXIX
  109. </p>
  110. </body>
  111. </html>

Proinf.net