1

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.

  • https://stackoverflow.com/questions/881085/count-the-number-of-occurrences-of-a-character-in-a-string-in-javascript#881111 – Blake Jul 01 '21 at 14:03

0 Answers0