javascripthtmlinput-fieldrowcount

How to sum up rows (that are not blank) from input values in a table using javascript


I've added input fields into a table. What I'm looking to do is to count all of the rows and add them into a table row total. Ideally I want these to have a value of 0.5 for each row that has an input value. I'm trying to do this with javascript but I don't know where to start.

On the total column, I'm trying to get the total count value within the rows. So for example row 1 to count the number of non-blank input values I want this total to appear where the current value is Total1. and the same iteration for the other rows for Total2, Total3 etc.

table{
    border: 1px solid;
    font-size: 20px;
    width: 1620px;
}

td.staff-input{
    max-width: 30px;
    background-color: white;

}

input:invalid{
    background-color: white;
    border-color: #efefef;
}

input:valid{

    font-weight:bold;
    border-color: orange;
}

input.staff-input{
    max-width: 30px;

}

table {
    empty-cells: hide;
    background: white;
}

td.dow{
    font-weight: 700;
    color: #34a853;
}

th{
    background-color: #34a853;
    color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    width: 30px;
}

th.total,th.additional-notes {
    width: 50px;
}

tr.staff-name:nth-child(odd) input:invalid{
    background-color: #efefef;
}
tr.staff-name:nth-child(odd){
    background-color: #efefef;
}

td.dow{
    background-color: white;
}

td{
    overflow: hidden;
}
input{
    width: 30px;
}

th.date{
    width: 4000px;
}

.staff-input input{
    width:30px;
}

.activities input{
    width: 200px;
    border-color:#efefef;
}

tr.staff-name td.dow{
    width:50px;
}
<!DOCTYPE html>
<link rel="stylesheet" href="table-styling.css">
<head>
<p>This is my awesome rota</p>
</head>
<Body>

    <table>
        <thead>
        <tr>
            <th class="date">Day</th>
            <th>Staff Name</th>
            <th>08:30</th>
            <th>09:00</th>
            <th>09:30</th>
            <th>10:00</th>
            <th>10:30</th>
            <th>11:00</th>
            <th>11:30</th>
            <th>12:00</th>
            <th>12:30</th>
            <th>13:00</th>
            <th>13:30</th>
            <th>14:00</th>
            <th>14:30</th>
            <th>15:00</th>
            <th>15:30</th>
            <th>16:00</th>
            <th>16:30</th>
            <th>17:00</th>
            <th>17:30</th>
            <th>18:00</th>
            <th>Total</th>
            <th>Activities</th>
        </tr>
    </thead>
    <tbody>
<tr class="staff-name">
<td rowspan="0" class="dow">Mon 20 Mar 2023</td>
<td>Marion</td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td>Total1</td>
<td class="activities"><input type="text"></td>
</tr>
<tr class="staff-name">
<td>Nicola</td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td>Total2</td>
<td class="activities"><input type="text"></td>
</tr>

<tr class="staff-name">
 <td>Fiona</td> 
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td>Total3</td>
 <td class="activities"><input type="text"></td>
</tr>
<tr class="staff-name">
<td>Teresa</td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td>Total4</td>
<td class="activities"><input type="text"></td>
</tr>
<tr class="staff-name">
<td>Lilly</td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td>Total5</td>
<td class="activities"><input type="text"></td>
</tr>
<tr class="staff-name">
<td>Jemma</td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td>Total6</td>
<td class="activities"><input type="text"></td>
</tr>
<tr class="staff-name">
<td>Rachel</td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td>Total7</td>
<td class="activities"><input type="text"></td>
</tr>
<tr class="staff-name">
    <tr class="staff-name">
        <td>Gemma</td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td>Total8</td>
        <td class="activities"><input type="text"></td>
    </tr>
</tbody>
    </table>
</Body>
I've tried to find some examples of code for this but all I've found is JavaScript for summing numerical values not non-empty values.


Solution

  • Here is my attempt to achieve it using javascript. Not sure if i understand your problem correctly. For each input it will increment the counter

    const allInputs = document.querySelectorAll('.staff-input input');
    allInputs.forEach(function(input) {
      input.addEventListener('change', handleValueChange);
    });
    
    function handleValueChange(e) {
      const parentTr = e.target.closest(".staff-name");
      const totalElem = parentTr.querySelector('.total');
      let total = 0;
      parentTr.querySelectorAll('.staff-input input').forEach(function(input) {
        if (input.value !== "") {
          total++;
        }
      });
      totalElem.innerHTML = total;
    }
    table {
      border: 1px solid;
      font-size: 20px;
      width: 1620px;
    }
    
    td.staff-input {
      max-width: 30px;
      background-color: white;
    }
    
    input:invalid {
      background-color: white;
      border-color: #efefef;
    }
    
    input:valid {
      font-weight: bold;
      border-color: orange;
    }
    
    input.staff-input {
      max-width: 30px;
    }
    
    table {
      empty-cells: hide;
      background: white;
    }
    
    td.dow {
      font-weight: 700;
      color: #34a853;
    }
    
    th {
      background-color: #34a853;
      color: white;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      width: 30px;
    }
    
    th.total,
    th.additional-notes {
      width: 50px;
    }
    
    tr.staff-name:nth-child(odd) input:invalid {
      background-color: #efefef;
    }
    
    tr.staff-name:nth-child(odd) {
      background-color: #efefef;
    }
    
    td.dow {
      background-color: white;
    }
    
    td {
      overflow: hidden;
    }
    
    input {
      width: 30px;
    }
    
    th.date {
      width: 4000px;
    }
    
    .staff-input input {
      width: 30px;
    }
    
    .activities input {
      width: 200px;
      border-color: #efefef;
    }
    
    tr.staff-name td.dow {
      width: 50px;
    }
    <!DOCTYPE html>
    
    <head>
      <p>This is my awesome rota</p>
    </head>
    
    <Body>
    
      <table>
        <thead>
          <tr>
            <th class="date">Day</th>
            <th>Staff Name</th>
            <th>08:30</th>
            <th>09:00</th>
            <th>09:30</th>
            <th>10:00</th>
            <th>10:30</th>
            <th>11:00</th>
            <th>11:30</th>
            <th>12:00</th>
            <th>12:30</th>
            <th>13:00</th>
            <th>13:30</th>
            <th>14:00</th>
            <th>14:30</th>
            <th>15:00</th>
            <th>15:30</th>
            <th>16:00</th>
            <th>16:30</th>
            <th>17:00</th>
            <th>17:30</th>
            <th>18:00</th>
            <th>Total</th>
            <th>Activities</th>
          </tr>
        </thead>
        <tbody>
          <tr class="staff-name">
            <td rowspan="0" class="dow">Mon 20 Mar 2023</td>
            <td>Marion</td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="total">Total1</td>
            <td class="activities"><input type="text"></td>
          </tr>
          <tr class="staff-name">
            <td>Nicola</td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="total">Total2</td>
            <td class="activities"><input type="text"></td>
          </tr>
    
          <tr class="staff-name">
            <td>Fiona</td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="total">Total3</td>
            <td class="activities"><input type="text"></td>
          </tr>
          <tr class="staff-name">
            <td>Teresa</td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="total">Total4</td>
            <td class="activities"><input type="text"></td>
          </tr>
          <tr class="staff-name">
            <td>Lilly</td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="total">Total5</td>
            <td class="activities"><input type="text"></td>
          </tr>
          <tr class="staff-name">
            <td>Jemma</td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="total">Total6</td>
            <td class="activities"><input type="text"></td>
          </tr>
          <tr class="staff-name">
            <td>Rachel</td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="total">Total7</td>
            <td class="activities"><input type="text"></td>
          </tr>
          <tr class="staff-name">
            <td>Gemma</td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
            <td class="total">Total8</td>
            <td class="activities"><input type="text"></td>
          </tr>
        </tbody>
      </table>
    </Body>