The sum of the columns in the table (input)-CodePudding

I need to make a table with dynamic column sums on a website. Unfortunately, I'm not very good at jQuery. Please help. [enter image description here][1]

My table in HTML [1]: https://i.stack.imgur.com/yV2Fo.png

table, td {
  border: 1.25px solid black;
}

<table>
  <thead>
    <tr>
      <td> NAME</td>
      <td> Name 1 </td>
      <td> Name 2 </td>
      <td> Name 3 </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td><input type="number"</td>
      <td><input type="number"</td>
      <td><input type="number"</td>
    </tr>
    <tr>
      <td>B</td>
      <td><input type="number"</td>
      <td><input type="number"</td>
      <td><input type="number"</td>
    </tr>
    <tr>
      <td>C</td>
      <td><input type="number"</td>
      <td><input type="number"</td>
      <td><input type="number"</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

CodePudding user response：

I'm not sure how your table is set up. There are different ways you could do it, but I think this could be a solution:

I think something like this is what you are looking for?

Column	Total
A	150
B	100
C	50
Total	200

This is how you can accomplish this:

$(document).ready(() => {
  let array = []; // Create an empty array
  let sum = 0; // Set sum to 0 - This is only to set the data type to a number
  
  /*
   Use Jquery's :nth-child() selector to get target the 2nd cell in the table body
    -- You can use :nth-child(3) for the 3rd cell etc...
    
    Then use the $each method to perform a function.
    The function will convert this cell's text (Using parseFloat() method) to a number and add (push()) it to our array
  */
  $("table tbody td:nth-child(2)").each(function() {
    array.push(parseFloat($(this).html()));
  });


 // Here we will loop over the array and add each value to the sum variable.
  for (let i = 0; i < array.length; i  ) {
    sum  = array[i];
  }

// Then append the last child (last table cell) in the table's footer with this sum value || Or if you gave the this cell an id, you can use that instead.
  $('table tfoot td:last-child').html(sum);
});

/* This can be used over many columns by selecting the different nth-child()'s 
*/

table, td {
  border: 1.25px solid black;
}
td {
  padding: 3px;
  text-align: center;
}

td:last-child {
  font-weight: bolder;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <!-- Table Heading -->
  <thead>
    <tr>
      <td> Column </td>
      <td> Total </td>
    </tr>
  </thead>
  <!-- Table Body -->
  <tbody>
    <tr>
      <td>A</td>
      <td>150</td>
    </tr>
    <tr>
      <td>B</td>
      <td>100</td>
    </tr>
    <tr>
      <td>C</td>
      <td>50</td>
    </tr>
  </tbody>
  <!-- Table Footer -->
  <tfoot>
    <tr>
      <td>Total </td>
      
      <!-- Add an id to this cell for the total or use my method in the js code-->
      <td id="tableTotal"></td> 
    </tr>
  </tfoot>
</table>

Please read the comments in the snippet, this will explain the process.

CodePudding user response：

My table in HTML

table, td {
  border: 1.25px solid black;
}

<table>
  <thead>
    <tr>
      <td> NAME</td>
      <td> Name 1 </td>
      <td> Name 2 </td>
      <td> Name 3 </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td><input type="number"</td>
      <td><input type="number"</td>
      <td><input type="number"</td>
    </tr>
    <tr>
      <td>B</td>
      <td><input type="number"</td>
      <td><input type="number"</td>
      <td><input type="number"</td>
    </tr>
    <tr>
      <td>C</td>
      <td><input type="number"</td>
      <td><input type="number"</td>
      <td><input type="number"</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>