0

I'm currently working on a project that allows the user to enter in data and create a graph based on that data. For this project, the data must be cumulative. I'm wondering how I can get column totals per row in jQuery for my data table.

This is the table I am working with

In this table, I'd like for there to be a way to have the data in each column added up to the latest date so that the data points per date would be a total of all of the values of the current date and the dates prior to the currently entered date. For example, the data points for 06/16/2016 would be 4000 for the first column and 4000 for the second column, for 07/16/2016 the data points would be 5882 and 8000 for the first and second columns respectively, and for 08/16/2016 the data points would be 7691 and 12000 for the first and second columns, and so on and so forth.

Here is my code for the function that gathers the data from the table:

function generateChartData() {
    var chartData = [];
$("tbody tr").each(function() {
        var date = jQuery(this).find('.data-category').val();
    var value = 0; 
    var value2 = 0;
    jQuery("td input:number",this).each(function() {
       value += jQuery(this).find('.data-value').val();
    }); 
    jQuery("td input:number",this).each(function() {
       value2 += jQuery(this).find('.data-value2').val();
    });

    if (date != '') {
        chartData.push({
            date: date,
            value: value,
            value2: value2

        });

        }
    });
    return chartData;

}

Here is my code for the table itself:

<div id="data-table">
<tr>
    <td><input class="data-cell data-category" value="2016-06-16" type="date" /></td>
    <td><input class="data-cell data-value" value="4000" type="number" step="10" /></td>
    <td><input class="data-cell data-value2" value="4000" type="number" step="10" /></td>
 </tr>
 <tr>
    <td><input class="data-cell data-category" value="2016-07-16" type="date" /></td>
    <td><input class="data-cell data-value" value="1882" type="number" step="10" /></td>
    <td><input class="data-cell data-value2" value="4000" type="number" step="10" /></td>
 </tr>
 <tr>
    <td><input class="data-cell data-category" value="2016-08-16" type="date" /></td>
    <td><input class="data-cell data-value" value="1809" type="number" step="10" /></td>
    <td><input class="data-cell data-value2" value="4000" type="number" step="10" /></td>
  </tr>
   <tr>
    <td><input class="data-cell data-category" value="2016-09-16" type="date" /></td>
    <td><input class="data-cell data-value" value="1322" type="number" step="10" /></td>
    <td><input class="data-cell data-value2" value="4000" type="number" step="10" /></td>
</tr>    
<tr>
    <td><input class="data-cell data-category" value="2016-10-16" type="date" /></td>
    <td><input class="data-cell data-value" value="1122" type="number" step="10" /></td>
    <td><input class="data-cell data-value2" value="4000" type="number" step="10" /></td>
</tr>
</div>
<br />
<input type="button" value="Add Row" onclick="addRow()" class="data-button" id="add-row" />

This is the jsfiddle for the project

Edit: This may seem like a duplicate, but I'm not trying to get the grand total for every column. I'm trying to get the total for every column for each entry date, and in an order that allows each date to reflect the cumulative total of the previous dates entered, for the first column of numerical data and the second column of numerical data. This won't work if I am simply adding up entered values in a table to get a grand total per column, which is what the question that was the duplicate of mine suggested, and won't work if the user does not enter data on a chronological basis, i.e., if the dates are not in order on the table.

Sufi Iman
  • 57
  • 1
  • 11
  • Possible duplicate of [jquery sum of multiple input fields if same class in one input](http://stackoverflow.com/questions/24126819/jquery-sum-of-multiple-input-fields-if-same-class-in-one-input) – Adjit Jul 05 '16 at 15:24
  • Its not clear what you are asking here. So if there's a 5 in row 1, a 2 in row 2, and a 7 in row 3 you want to see 5, 7, 14? – Jared Smith Jul 05 '16 at 15:24
  • Basically, what you want is the total for column 1 and column 2 for a specific date? – Adjit Jul 05 '16 at 15:25
  • Place `var value = 0; var value2 = 0;` before `$("tbody tr").each` – Alex Kudryashev Jul 05 '16 at 15:33
  • @Adjit and Jared, yes, I do want column totals for specific dates that accumulate chronologically – Sufi Iman Jul 05 '16 at 15:40

0 Answers0