I had a small problem with the implementation of the timeline. I don’t know how to make each timeline have its own width and to contain any information. The width and position of the timeline depends on the time of day (AM / PM). I try using js to create a table and immediately create unique id inside the tags so that I can then give my CSS styles to each timeline. When unique id are created for each they do not respond to predefined CSS styles. What should I do? And how can I make it so that there are several timelines on one line and that you can add a modal window to them when you hover over the mouse?
Below are the pictures:
1) What am I trying to do
2) What did I
Here is my code:
var tableObj = document.createElement('table');
tableObj.style.width = '40%';
tableObj.setAttribute('border','1');
tableObj.style.borderCollapse = 'collapse';
var tableHTML = '<tr><td style="width: 50%; padding-bottom: 20px;">AM</td><td style="padding-bottom: 20px;">PM</td></tr>';
for (var i = 1; i <= 10; i++){
if(i%2==0){
tableHTML += '<tr><td><div class="timeline" id="Div-' + i + '"></div>' + i + '</td><td>' +i + '</td></tr>';
}
else {
tableHTML += '<tr><td><div id="Div-' + i + '"></div>' + i + '</td><td>' + i + '</td></tr>';
}
}
tableObj.innerHTML = tableHTML;
document.body.appendChild(tableObj);
.timeline {
background: red;
position: absolute;
margin-top: 2px;
left: 20px;
width: 50px;
height: 12px;
border: 1px solid black;
}
#Div-2 {
background: green;
}