i am working on a class assessment where we are to create a weekly schedule for a HR admin to manage staff exposure to their office during covid. i am using a html table and appending rows to the body when a new staff member is entered into the schedule.
<table class="schedule" id="adminTable">
<thead>
<tr>
<th colspan="1" id="title"></th>
<th colspan="2" id="monday1">Monday</th>
<th colspan="2" id="tuesday1">Tuesday</th>
<th colspan="2" id="wednesday1">Wednesday</th>
<th colspan="2" id="thursday1">Thursday</th>
<th colspan="2" id="friday1">Friday</th>
<th colspan="1" id="hours">Hours</th>
<th colspan="1" id="delete">Delete</th>
</tr>
</thead>
<tbody id="adminBody">
<!--tbody to dynamically append table rows-->
</tbody>
<tfoot>
<th id="time">Time</th>
<th>8am-12pm</th>
<th>1pm-5pm</th>
<th>8am-12pm</th>
<th>1pm-5pm</th>
<th>8am-12pm</th>
<th>1pm-5pm</th>
<th>8am-12pm</th>
<th>1pm-5pm</th>
<th>8am-12pm</th>
<th>1pm-5pm</th>
<th colspan="2" id="totalHours">Total Hours:</th>
</tfoot>
</table>
i am appending the draggable dive to the td cell with the code below. this could contain the words "office" or "Home".
const save = document.getElementById('saveButton');
save.addEventListener('click', () => {
var eventName = eventInput.value;
var wrap = $('<div draggable="true" ondragstart="drag(event)">').attr('id', 'count' + counter).attr('class', 'draggable').text(eventName.toLowerCase());
addCell(adminTable, rIndex, cIndex, wrap);
eventModal.style.display = "none";
document.getElementById("eventTitleInput").value = "";
counter++;
localStorage.setItem('admin1', adminBody.innerHTML);
});
if i add multiple staff and multiple div's containing the word "office", how would i count the occurrence of "office" in each individual row and then display that in the hours cell on each individual row?
i know this will be something to do with iterating over the cells in each row but everything i have tried and looked at online does not seem to work, any help would be appreciated.
thanks.