Display sum of columns and rows in Side By Side | XM Community

Display sum of columns and rows in Side By Side

  • 26 August 2022
  • 1 reply
  • 224 views

Userlevel 7
Badge +38

I am working on updating code I found on community to display the sum of columns and rows in a side by side table any time a value is edited in the table. I know what I have isn't as efficient as it could be and is a bit "brute." But as a non-coder I'm just happy with how far I have gotten. I have a 3x3 table with the last row and last column using JavaScript to display sums. I have gotten all but the second row of the last column to populate the sum (see code below). My error seems to be that I wanted to update the code from
``
input:first input:last
``
to
``
input:second
``
but that doesn't work.
If anyone can help me trouble shoot to get the right sum to show up in that cell I would appreciate it. I'm not concerned about optimizing the code I've written but if that's easier for you, go for it.
``
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
var $jq = jQuery.noConflict(); //always keep this

// setting the value 0 for all boxes if blank or 0
$jq('.SBS1 input').each(function(){ //column 1
$jq(this).val(getVal($jq(this).val()));
});
$jq('.SBS2 input').each(function(){ //column 2
$jq(this).val(getVal($jq(this).val()));
});
$jq('.SBS3 input').each(function(){ //column 3
$jq(this).val(getVal($jq(this).val()));
});

//change the text boxes to numeric
function getVal(val){ var num = parseInt(val); if(isNaN(num)) {num = 0;} return num;};


//COLUMN 1 CODING
//create a sum for column 1
var $sumCol1=0; //define sum variable for column 1
$jq('.SBS1 input:last').val($sumCol1); //display it in the last row
$jq('.SBS1 input:last').css('fontWeight','bold'); //make the last row bold

//calcualte sum on changes to the screen in column 1
$jq('.SBS1 input').not('.last').change(function(){
//for every box
var $sum1 = 0;
$jq('.SBS1 input').not(':last').each(function(){
$sum1 += +getVal($jq(this).val());
});
$jq('.SBS1 input:last').val($sum1);
});

//COLUMN 2 CODING
//create a sum for column 2
var $sumCol2=0; //define sum variable for column 2
$jq('.SBS2 input:last').val($sumCol2); //display it in the last row
$jq('.SBS2 input:last').css('fontWeight','bold'); //make the last row bold

//calcualte sum on changes to the screen in column 2
$jq('.SBS2 input').not('.last').change(function(){
//for every box
var $sum2 = 0;
$jq('.SBS2 input').not(':last').each(function(){
$sum2 += +getVal($jq(this).val());
});
$jq('.SBS2 input:last').val($sum2);
});

//COLUMN 3 CODING --- SUMMING THE ROWS
//define row 1 sum
var $sumRow1=0; //define sum of row 1 as zero
$jq('.SBS3 input:first').val($sumRow1); //display in last colmn of row 1
$jq('.SBS3 input:first').css('fontWeight','bold'); //make last cell in row 1 bold

//calculate sum on any changes to the screen
//For every columns 1 and 2 of row 1
$jq('.SBS input').change(function(){
var $sumr1=0;
$jq('.SBS input').each(function(){
$sumr1 = getVal($jq('.SBS1 input:first').val()) + getVal($jq('.SBS2 input:first').val());
});
$jq('.SBS3 input:first').val($sumr1);
});

//define row 3 sum
var $sumRow3=0; //define sum of row 3 as zero
$jq('.SBS3 input:last').val($sumRow3); //display in last colmn of row 3
$jq('.SBS3 input:last').css('fontWeight','bold'); //make last cell in row 3 bold

//calculate sum on changes to the screen
//For every columns 1 and 2 of row 3
$jq('.SBS input').change(function(){
var $sumr3=0;
$jq('.SBS input').each(function(){
$sumr3 = getVal($jq('.SBS1 input:last').val()) + getVal($jq('.SBS2 input:last').val());
});
$jq('.SBS3 input:last').val($sumr3);
});

//define row 2 sum
var $sumRow2=0; //define sum of row 2 as zero
$jq('.SBS3 input:second').val($sumRow2); //display in last colmn of row 2
$jq('.SBS3 input:second').css('fontWeight','bold'); //make last cell in row 2 bold

//calculate sum on changes to the screen
//For every columns 1 and 2 of row 2
$jq('.SBS input').change(function(){
var $sumr2=0;
$jq('.SBS input').each(function(){
$sumr2 = getVal($jq('.SBS1 input:second').val()) + getVal($jq('.SBS2 input:second').val());
});
$jq('.SBS3 input:second').val($sumr2);
});


});
``


1 reply

Userlevel 7
Badge +38

Found a solve for this. Change second to eq(1). It's still hard coded but for anyone else that has a reasonable amount of rows you can easily adapt this code to add row sums in side by sides with more than three rows. Where row2 = eq(1), row3 = eq(4) ... rown=last
``
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
var $jq = jQuery.noConflict(); //always keep this

// setting the value 0 for all boxes if blank or 0
$jq('.SBS1 input').each(function(){ //column 1
$jq(this).val(getVal($jq(this).val()));
});
$jq('.SBS2 input').each(function(){ //column 2
$jq(this).val(getVal($jq(this).val()));
});
$jq('.SBS3 input').each(function(){ //column 3
$jq(this).val(getVal($jq(this).val()));
});

//change the text boxes to numeric
function getVal(val){ var num = parseInt(val); if(isNaN(num)) {num = 0;} return num;};


//COLUMN 1 CODING
//create a sum for column 1
var $sumCol1=0; //define sum variable for column 1
$jq('.SBS1 input:last').val($sumCol1); //display it in the last row
$jq('.SBS1 input:last').css('fontWeight','bold'); //make the last row bold

//calcualte sum on changes to the screen
$jq('.SBS1 input').not('.last').change(function(){
//for every box
var $sum1 = 0;
$jq('.SBS1 input').not(':last').each(function(){
$sum1 += +getVal($jq(this).val());
});
$jq('.SBS1 input:last').val($sum1);
});

//COLUMN 2 CODING
//create a sum for column 2
var $sumCol2=0; //define sum variable for column 2
$jq('.SBS2 input:last').val($sumCol2); //display it in the last row
$jq('.SBS2 input:last').css('fontWeight','bold'); //make the last row bold

//calcualte sum on changes to the screen
$jq('.SBS2 input').not('.last').change(function(){
//for every box
var $sum2 = 0;
$jq('.SBS2 input').not(':last').each(function(){
$sum2 += +getVal($jq(this).val());
});
$jq('.SBS2 input:last').val($sum2);
});

//COLUMN 3 CODING
//row 1 sum
var $sumRow1=0; //define sum of row 1 as zero
$jq('.SBS3 input:first').val($sumRow1); //display in last colmn of row 1
$jq('.SBS3 input:first').css('fontWeight','bold'); //make last cell in row 1 bold

//calculate sum on changes to the screen
//For every columns 1 and 2 of row 1
$jq('.SBS input').change(function(){
var $sumr1=0;
$jq('.SBS input').each(function(){
$sumr1 = getVal($jq('.SBS1 input:first').val()) + getVal($jq('.SBS2 input:first').val());
});
$jq('.SBS3 input:first').val($sumr1);
});

//row 2 sum
var $sumRow2=0; //define sum of row 2 as zero
$jq('.SBS3 input:eq(1)').val($sumRow2); //display in last colmn of row 2
$jq('.SBS3 input:eq(1)').css('fontWeight','bold'); //make last cell in row 2 bold

//calculate sum on changes to the screen
//For every columns 1 and 2 of row 2
$jq('.SBS input').change(function(){
var $sumr2=0;
$jq('.SBS input').each(function(){
$sumr2 = getVal($jq('.SBS1 input:eq(1)').val()) + getVal($jq('.SBS2 input:eq(1)').val());
});
$jq('.SBS3 input:eq(1)').val($sumr2);
});


//row 3 sum
var $sumRow3=0; //define sum of row 3 as zero
$jq('.SBS3 input:last').val($sumRow3); //display in last colmn of row 3
$jq('.SBS3 input:last').css('fontWeight','bold'); //make last cell in row 3 bold

//calculate sum on changes to the screen
//For every columns 1 and 2 of row 3
$jq('.SBS input').change(function(){
var $sumr3=0;
$jq('.SBS input').each(function(){
$sumr3 = getVal($jq('.SBS1 input:last').val()) + getVal($jq('.SBS2 input:last').val());
});
$jq('.SBS3 input:last').val($sumr3);
});



});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});
``

Leave a Reply