Adding up rows and columns using HTML

Question

Adding up rows and columns using HTML

I've designed an HTML table to function as a spreadsheet, with the goal of being able to total up rows and display the sum in a cell labeled "Total." The same calculation should be applied to columns as well, with totals displayed in the last column cell. I've attempted various jQuery implementations without success. Here's the structure of the table:

  <!-- Table Content Starts Here -->
    <div class="tableContent">

        <div class="row">

            <div class="col-md-12">
                <table id="ccTable" cellpadding="0" cellspacing="0" border="1" class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr class="tableHdr">
                            <th scope="col" align="right">Days</th>
                            <th scope="col">S</th>
                            <th scope="col">M</th>
                            <th scope="col">T</th>
                            ...
                                                    <td><input type='text' size ="2"class='editable' value='0.00' /></td>
                        </tr>

javascript jquery html css

Answer 1

Answer №1

It seems like you're looking to calculate the sum of values in both rows and columns of a table. Here's a sample code that can help you achieve this:

$(document).ready(function() {
  var row = 0,
    col = 0,
    ncol = 0;
  var sum;
  // sum by row
  $("tr").each(function(rowindex) {
    sum = 0;
    col = 0;
    $(this).find("td").each(function(colindex) {
      col++;
      newval = $(this).find("input").val();
      if (isNaN(newval)) {
        $(this).html(sum);
        if (col > ncol) {
          ncol = col - 1;
        }
      } else {
        sum += parseInt(newval);
      }
    });
  });

  // sum by col
  for (col = 1; col < ncol + 1; col++) {
    sum = 0;
    $("tr").each(function(rowindex) {
      $(this).find("td:nth-child(" + col + ")").each(function(rowindex) {
        newval = $(this).find("input").val();
        if (isNaN(newval)) {
          $(this).html(sum);
        } else {
          sum += parseInt(newval);
        }
      });
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input value="4" />
    </td>
    <td>
      <input value="2" />
    </td>
    <td>
      <input value="3" />
    </td>
    <td class="rowsum">-</td>
  </tr>
  <tr>
    <td>
      <input value="4" />
    </td>
    <td>
      <input value="5" />
    </td>
    <td>
      <input value="6" />
    </td>
    <td class="rowsum">-</td>
  </tr>
  <tr>
    <td>
      <input value="7" />
    </td>
    <td>
      <input value="8" />
    </td>
    <td>
      <input value="9" />
    </td>
    <td class="rowsum">-</td>
  </tr>
  <tr>
    <td class="colsum">-</td>
    <td class="colsum">-</td>
    <td class="colsum">-</td>
  </tr>
</table>

Answer 2

It seems like you're looking to calculate the sum of values in both rows and columns of a table. Here's a sample code that can help you achieve this:

$(document).ready(function() {
  var row = 0,
    col = 0,
    ncol = 0;
  var sum;
  // sum by row
  $("tr").each(function(rowindex) {
    sum = 0;
    col = 0;
    $(this).find("td").each(function(colindex) {
      col++;
      newval = $(this).find("input").val();
      if (isNaN(newval)) {
        $(this).html(sum);
        if (col > ncol) {
          ncol = col - 1;
        }
      } else {
        sum += parseInt(newval);
      }
    });
  });

  // sum by col
  for (col = 1; col < ncol + 1; col++) {
    sum = 0;
    $("tr").each(function(rowindex) {
      $(this).find("td:nth-child(" + col + ")").each(function(rowindex) {
        newval = $(this).find("input").val();
        if (isNaN(newval)) {
          $(this).html(sum);
        } else {
          sum += parseInt(newval);
        }
      });
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input value="4" />
    </td>
    <td>
      <input value="2" />
    </td>
    <td>
      <input value="3" />
    </td>
    <td class="rowsum">-</td>
  </tr>
  <tr>
    <td>
      <input value="4" />
    </td>
    <td>
      <input value="5" />
    </td>
    <td>
      <input value="6" />
    </td>
    <td class="rowsum">-</td>
  </tr>
  <tr>
    <td>
      <input value="7" />
    </td>
    <td>
      <input value="8" />
    </td>
    <td>
      <input value="9" />
    </td>
    <td class="rowsum">-</td>
  </tr>
  <tr>
    <td class="colsum">-</td>
    <td class="colsum">-</td>
    <td class="colsum">-</td>
  </tr>
</table>

Answer 3

Answer №2

To retrieve the values from each cell, you can include event listeners like change, keyup, and input on the input fields within the table.

Important: Ensure that the total inputs are not editable.

$(function() {

  // Add an event listener
  $('#ccTable input').bind("change keyup input", function() {

    var colValues = [];                                        // Initialize the column array

    $('#ccTable tbody tr:not(:last-child)').each(function() {  // Iterate through each row
      var rowValues = 0;                                       // Initialize row total
      $(this).find('input:not(:last)').each(function(i) {      // Loop through each input in the row
        var val = +$(this).val() || 0;                         // Retrieve input value, if not a number assign as 0

        rowValues += val;                                      // Add input value to rowValues 

        colValues[i] = colValues[i] || 0;                      // Initialize the column as 0
        colValues[i] += val;                                   // Add input value to the column
      })

      // Update row total
      $(this).find('input:last').val(rowValues.toFixed(2));
    });

    // Update column total
    $('#ccTable tbody tr:last-child').find('input:not(:last)').each(function(i) {
      $(this).val(colValues[i].toFixed(2));
    })

    // Calculate sum of all colValues and update the total/total cell
    var sum = colValues.reduce((c, v) => c + v);
    $('#ccTable tbody tr:last-child').find('input:last').val(sum.toFixed(2));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="ccTable" cellpadding="0" cellspacing="0" border="1" class="table table-striped table-bordered table-hover">
  <thead>
    <tr class="tableHdr">
      <th scope="col" align="right">Days</th>

      ... (remaining HTML code)
      
    </tr>
  </thead>
  <tbody>
  
    ... (remaining HTML code)
    
  </tbody>
</table>

Answer 4

To retrieve the values from each cell, you can include event listeners like change, keyup, and input on the input fields within the table.

Important: Ensure that the total inputs are not editable.

$(function() {

  // Add an event listener
  $('#ccTable input').bind("change keyup input", function() {

    var colValues = [];                                        // Initialize the column array

    $('#ccTable tbody tr:not(:last-child)').each(function() {  // Iterate through each row
      var rowValues = 0;                                       // Initialize row total
      $(this).find('input:not(:last)').each(function(i) {      // Loop through each input in the row
        var val = +$(this).val() || 0;                         // Retrieve input value, if not a number assign as 0

        rowValues += val;                                      // Add input value to rowValues 

        colValues[i] = colValues[i] || 0;                      // Initialize the column as 0
        colValues[i] += val;                                   // Add input value to the column
      })

      // Update row total
      $(this).find('input:last').val(rowValues.toFixed(2));
    });

    // Update column total
    $('#ccTable tbody tr:last-child').find('input:not(:last)').each(function(i) {
      $(this).val(colValues[i].toFixed(2));
    })

    // Calculate sum of all colValues and update the total/total cell
    var sum = colValues.reduce((c, v) => c + v);
    $('#ccTable tbody tr:last-child').find('input:last').val(sum.toFixed(2));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="ccTable" cellpadding="0" cellspacing="0" border="1" class="table table-striped table-bordered table-hover">
  <thead>
    <tr class="tableHdr">
      <th scope="col" align="right">Days</th>

      ... (remaining HTML code)
      
    </tr>
  </thead>
  <tbody>
  
    ... (remaining HTML code)
    
  </tbody>
</table>

Answer 5

Answer №3

Take a look at my Sample code

This code snippet is concise and straightforward.

calculateTable('#ccTable');

function calculate(table, e) {
  return setTimeout(()=>{
    var $rows = $(table).find('tr');

    var data = $rows
    .slice(2,-1)
    .get()
    .map(el =>
         $(el)
         .find('td:not(:first) input')
         .get()
         .map(el => parseFloat($(el).val()) || 0)
        );

    $rows.last()
      .find('td')
      .slice(1)
      .each((index, el) => {
            $(el).find('input')
                .val(data
                    .reduce((acc, val) => acc + val[index], 0)
                .toFixed(2));
        });
  });
}

function calculateTable (target) {
    handler = calculate.bind(null, target)
    $(target).find('input')
            .change(handler)
            .keypress(handler);
  handler();
}

Answer 6

Take a look at my Sample code

This code snippet is concise and straightforward.

calculateTable('#ccTable');

function calculate(table, e) {
  return setTimeout(()=>{
    var $rows = $(table).find('tr');

    var data = $rows
    .slice(2,-1)
    .get()
    .map(el =>
         $(el)
         .find('td:not(:first) input')
         .get()
         .map(el => parseFloat($(el).val()) || 0)
        );

    $rows.last()
      .find('td')
      .slice(1)
      .each((index, el) => {
            $(el).find('input')
                .val(data
                    .reduce((acc, val) => acc + val[index], 0)
                .toFixed(2));
        });
  });
}

function calculateTable (target) {
    handler = calculate.bind(null, target)
    $(target).find('input')
            .change(handler)
            .keypress(handler);
  handler();
}

Adding up rows and columns using HTML

Answer №1

Answer №2

Answer №3

Similar questions

Display a block by using the focus() method

When viewed on mobile devices, the image shrinks significantly

Circular Graphical Representation using CSS3 styling

JavaScript cannot determine the length of an array of objects

Sending both GET and POST parameters in a single AJAX request using jQuery

Issue with uneven spacing on both ends of the screen on mobile devices

Installing different versions of a package in npm can be done by loading multiple versions

Increasing the level of CSS list counters

What is the best way to retrieve AJAX data in Django views?

Obtain the child's identification number and include it in the parent element as an ARIA

Attempting to craft a multi-filter feature using AngularJS that will allow for the precise filtering of JSON data based on both month and year identifiers

What is the best way to position a background image at the top of a div without overlapping the

Toggle the class of an element with jQuery based on the unchecked state of a radio button

Adjusting the styling of a webpage in real-time

What exactly does the question mark represent in the code structure as indicated in VSCode?

Setting up numerous instances of TinyMCE for use

An error occurred with the authorization headers when attempting to retrieve the requested JSON

Why is it that jQuery is not working in Internet Explorer but works fine in Firefox?

Customize the appearance of polygons in OpenLayers 2 by adjusting the fill color and opacity

After reloading the data tables, analyze the information and dynamically highlight any rows in red that remain unchanged