Quiero crearlo dinámicamente proporcionando n n = número total, por ejemplo, en la imagen de arriba n = 30
Quiero hacerlo en html, usando jquery o javascript y no es un teclado, sino un contador de cuántas preguntas se insertan y cuántas quedan.
Usando grid CSS:
const widgetContainer = document.getElementById("widget-container"); let n = 30; for (i = 1; i <= n; i++) { widgetContainer.innerHTML += "<button>" + i + "</button>"; } div#widget-container { display: grid; grid-template-columns: repeat(6, calc(100%/6)); grid-gap: 5px; max-width: 250px; } div#widget-container>* { display: flex; justify-content: center; border: 1px solid black; align-items: center; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="widget-container"> </div> </body> </html>Esto es bastante simple de hacer con CSS Grid y algo de JavaScript.
Cree una función que acepte un número y repita hasta ese número creando una cadena HTML en cada iteración. Coloca cada cadena en una matriz y luego devuelve la matriz joined como una cadena de HTML.
Esa cadena HTML se agrega a un contenedor que usa Grid para mostrar el HTML.
Dado que este no es un teclado, puede agregar un atributo de datos complementarios a cada elemento para que pueda orientarlos por separado si es necesario.
function createButtons(n) { // Create an array const html = []; // Push HTML into the array on each iteration // Each button has its own data id // Note: I've used a button here because they're // easier to style for (let i = 1; i <= n; i++) { html.push(`<button data-id="${i}" class="pad" disabled>${i}</button>`); } // Return the joined-up array as a string return html.join(''); } // Select the container, and add the result // of calling the function as its innerHTML const grid = document.querySelector('.grid'); grid.innerHTML = createButtons(30); // Set the count, and grab all the buttons const count = 7; const buttons = document.querySelectorAll('.pad'); // Now you can loop over the button collection, and // add an active class to each button in the loop... for (let i = 0; i < count; i++) { buttons[i].classList.add('active'); } //...or activate them seperately const eighteen = document.querySelector('.pad[data-id="18"]'); eighteen.classList.add('active'); .grid { display: grid; width: 250px; grid-template-columns: repeat(5, 1fr); row-gap: 0.6em;} .pad { padding: 0.5em 0.2em; border-radius: 5px; color: red; border: 1px solid red; background-color: white; width: 40px;} .active { background-color: lightblue; color: black; } <div class="grid"></div>