I am building a table for keeping track of various employee information. The status is specifying whether the employee is at home, at office, on trip, etc. I want to let the user pick this status using an icon. Originally I was using emojis like this:
We want to keep this kind of design, but we want to be able to design our own icons now. So, we cannot use emojis. Instead, I need to have the same kind of look and feel but the element needs to have an image inside of it. I've looked around on stack overflow and it looks like every solution requires jQuery. I am not allowed to use jQuery so I am wondering if this is even possible.
The table of employee info is generated through a JavaScript function that receives data from an SQL table and then creates elements if they don't exist/updates existing elements. Here is the part of the function that creates the status cell. My original solution was to create an image element and then append it to the statOption element but this did not work.
// create status cell
const statCell = document.createElement("td");
statCell.id = "status_"+data[i].id;
const statInput = document.createElement("select");
if (data[i].stat == 3) newRow.setAttribute('style', 'background-color: crimson');
statInput.id = "stat_"+data[i].id;
statInput.setAttribute('onchange', 'field_changed(event)');
statInput.classList.add("status");
// HERES MY ATTEMPTED SOLUTION
const airplaneImg = document.createElement("img");
airplaneImg.setAttribute('src', 'airplane.png'); // inside of the same directory
airplaneImg.setAttribute('width', '40px');
airplaneImg.setAttribute('height', 40px');
airplaneImg.setAttribute('alt', 'airplane');
for (var k = 0; k < emojis.size; k++) {
const statOption = document.createElement("option");
statOption.id = "option_"+k;
statOption.setAttribute('value', k);
statOption.innerHTML = emojis.get(k);
statOption.title = emojiDescriptors.get(k);
if (k == data[i].stat) {
statOption.selected = true;
statInput.title = emojiDescriptors.get(k);
}
statOption.appendChild(airplaneImg);
statInput.appendChild(statOption);
}
statCell.appendChild(statInput);
newRow.appendChild(statCell);
Of course, I would need to do this with 4 different images. Ill need to figure out a way to implement it, but I just wanted to see if this way would work at all.
So am I just completely unable to do this sort of thing or is there still hope?
