Me gustaría completar automáticamente mi tabla HTML con una lista desplegable.
Utilicé el siguiente código, pero el problema es que necesito especificar la opción 24 en esta lista desplegable, y si quisiera agregar las 24, esta línea será extremadamente larga.
¿Puedo preguntar si hay alguna forma de resolverlo con un código un poco más corto y mejor?
Lista:
Propulsión CA
Ajax
soy general
Embajador
AMC
Americano
Americano colgado
Carrocerías Anteros
Apolo
persona
arnolt
Castaño
Motores Aurica
Avanti
cervecero
Brisco
Cepillo
BXR
carrol shelby
Caso
Chadwick
Velero
Inspector
Cometa
row2.insertCell(count + 1).innerHTML = '<select id="' + count2 + '"' + 'name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option></select>'Intente almacenarlos en una matriz y use la plantilla literal para recorrerla:
let list = [AC Propulsion,Ajax,AM General,Ambassador,AMC,American,American, Underslung,Anteros Coachworks, Apollo,Apperson,Arnolt,Auburn,Aurica,Motors,Avanti,Brewster,Brisco,Brush,BXR,Carroll,Shelby,Case,Chadwick,Chandler,Checker,Comet] row2.insertCell(count + 1).innerHTML = '<select id="sec"></select>' list.forEach(item=>{ document.querySelector('#sec').innerHTML +=`<option value=${item}>${item}</option>` })Si desea poner el valor en minúsculas, simplemente use:
let list = [AC Propulsion,Ajax,AM General,Ambassador,AMC,American,American, Underslung,Anteros Coachworks, Apollo,Apperson,Arnolt,Auburn,Aurica,Motors,Avanti,Brewster,Brisco,Brush,BXR,Carroll,Shelby,Case,Chadwick,Chandler,Checker,Comet] row2.insertCell(count + 1).innerHTML = '<select id="sec"></select>' list.forEach(item=>{ document.querySelector('#sec').innerHTML +=`<option value=${item.toLowerCase()}>${item}</option>` })Puede agregar sus valores a un objeto y luego formar una cadena a partir de ellos en un bucle. Este método le permite establecer diferentes claves y valores
var obj = {'volvo':'Volvo', 'saab':'Saab','audi':'Audi'}; var opt = ''; for (var key in obj) { opt += '<option value="' + key + '">' +obj[key]+ '</option>'; } row2.insertCell(count + 1).innerHTML = '<select id="' + count2 + '"' + 'name="cars">'+opt+'</select>'Como han mencionado otros, pero con un ejemplo de trabajo, pondría autos en una matriz. También he usado texto de opción para generar valor de opción, por lo que no tiene que ingresar valores en la matriz.
const options = ['AC Propulsion', 'Ajax', 'AM General', 'Ambassador', 'AMC', 'American', 'American Underslung', 'Anteros Coachworks', 'Apollo', 'Apperson', 'Arnolt', 'Auburn', 'Aurica Motors', 'Avanti', 'Brewster', 'Brisco', 'Brush', 'BXR', 'Carroll Shelby', 'Case', 'Chadwick', 'Chandler', 'Checker', 'Comet']; const optionsHtml = () => { let result = ''; let optionValue = ''; options.forEach(optionText => { optionValue = optionText.replace(/ /g, '-').toLowerCase(); result += `<option value="${optionValue}">${optionText}</option>\n`; }); return result; } const row2 = { insertCell(count) { const tr = document.createElement('tr'); const td = document.createElement('td'); td.classList.add(`td-${count}`); tr.appendChild(td); document.getElementById('test-table').appendChild(tr); return td; } } const count = 0; const count2 = 1; row2.insertCell(count + 1).innerHTML = '<select id="' + count2 + '"' + 'name="cars">' + optionsHtml() + '</select>' <table id="test-table"> <thead> <tr> <th> Car </th> </thead> <tbody> </tbody> </table>