I would like to auto populate my HTML table with drop down list.
I used below code, but the problem is, I need to specify 24 option to this drop down list, and if I would like add all 24, this line will be extremly long.
Can I ask if there is any way to solve it a bit shorter code and better way?
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="' + count2 + '"' + 'name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option></select>'
Try store them in an array and use template literal to loop over it:
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>`
})
If you want to make value lower case, just 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>`
})
You can add your values to an object and then form a string from them in a loop. This method allows you to set different key and value
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>'
As others have mentioned, but with a working example, I would put cars in an array. I've also used option text to generate option value, so you don't have to enter values into array.
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>