TechQA.

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

88 views Asked by At

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.

javascript html input-field rowcount
Original Q&A
2

There are 2 answers

3
CodeThing On BEST ANSWER

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>

4
Juan On

I don't know if I understood what you want but this code (if I'm not mistaken) should help you.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){


    // I place a button on the HTML Code and when is clicked
    $('#myButton').click(function(){

        // For Each Line with Class Name "staff-name"
        $('.staff-name').each(function(index){

            // Initialization Total For the Current Line
            let lineTotal = 0;

            // For Each Input Type Text with Class Name "staff-input" of the Current Line
            $(this).find('.staff-input input[type=text]').each(function(indexCol) { 

                // Get the value enterred
                let value = $(this).val();

                // Increment 
                lineTotal = lineTotal+(value/2);

            });

            // Display in Console
            console.log(index+" - "+lineTotal);

            // Place the Total in input type Text of Cell 'activities' of the Current line
            $(this).find('.activities input[type=text]').val(lineTotal);
        });
        // Fin - For Each Line with Class Name "staff-name"

    });
});
</script>

The code above is JQuery.
And you can put this code just before the body end tag < / body >

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in INPUT-FIELD

Related Questions in ROWCOUNT

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions