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>
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>