/    Sign up×
Community /Pin to ProfileBookmark

Totalling Columns and Rows

Copy linkTweet thisAlerts:
Mar 04.2006

I have a table that has about 8 columns and 20-25 rows. Each cell contains a text box. The right-column and bottom row should simply be a total of the other cells in the column/row. I know enough javascript that I could write code to do the totals if I code each text box separately. I am hoping someone can give me an idea how to write one reusable function that I can call using the onblur event of any cell. For example, if a user enters a figure in the textbox that sits in the 4th row, 3rd column, then the boxes at the bottom of the 3rd column and the end of row 4 would recompute. Basically it’s like an excel worksheet. Any thoughts?

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@phpnoviceMar 05.2006 — I am hoping someone can give me an idea how to write one reusable function that I can call using the onblur event of any cell.[/QUOTE]
I would use the [B]onchange[/B] event rather than the [B]onblur[/B] event. There's no sense recalculating if nothing was changed. ?
Copy linkTweet thisAlerts:
@betheballauthorMar 05.2006 — Good point. I guess I didn't realize that you could use onchange with a text box. I thought it was more for dropdowns and radio buttons.
Copy linkTweet thisAlerts:
@phpnoviceMar 05.2006 — At document load time, the following dynamically fits itself to the first table within the first form in a document. It presumes that the first table row is a header row and, therefore, ignores it completely. Otherwise, it attaches itself to the first INPUT element within all other rows in the table except the last and the last cell in every row.

Then, after that process is complete, any changes to those INPUT elements are cross-footed, both horizontally and vertically, and the last column is also totalled.
[code=php]
var spreadsheet = null;
//
function crossFoot() {
if(spreadsheet) {
var fld, rows = spreadsheet.rows;
var c = this.col, clen, r, rlen = rows.length;
var nbr, tot = 0;
for(r=1; r<rlen; ++r) {
fld = rows[r].cells[c].getElementsByTagName("INPUT")[0];
if(r == (rlen - 1)) {
fld.value = tot;
} else {
nbr = Number(fld.value);
if(!isNaN(nbr)) tot += nbr;
}
}
r = this.row;
clen = rows[r].cells.length;
tot = 0;
for(c=0; c<clen; ++c) {
fld = rows[r].cells[c].getElementsByTagName("INPUT")[0];
if(c == (clen - 1)) {
fld.value = tot;
} else {
nbr = Number(fld.value);
if(!isNaN(nbr)) tot += nbr;
}
}
c = clen - 1;
tot = 0;
for(r=1; r<rlen; ++r) {
fld = rows[r].cells[c].getElementsByTagName("INPUT")[0];
if(r == (rlen - 1)) {
fld.value = tot;
} else {
nbr = Number(fld.value);
if(!isNaN(nbr)) tot += nbr;
}
}
}
return true;
}
function initialize() {
spreadsheet = document.forms[0].getElementsByTagName("TABLE")[0];
if(spreadsheet) {
var fld, rows = spreadsheet.rows;
var c, clen, r, rlen = rows.length - 1;
for(r=1; r<rlen; ++r) {
clen = rows[r].cells.length - 1;
for(c=0; c<clen; ++c) {
fld = rows[r].cells[c].getElementsByTagName("INPUT")[0];
if(fld) {
fld.row = r;
fld.col = c;
fld.onchange = crossFoot;
}
}
}
}
return true;
}
window.onload=initialize;
[/code]
Copy linkTweet thisAlerts:
@betheballauthorMar 05.2006 — Excellent! Even more than I had hoped for. I thought I would at least have to add an id to each input and some sort of event. Great work!
Copy linkTweet thisAlerts:
@phpnoviceMar 05.2006 — Thanks. Ain't nobody does better work nor has better foresight than me -- all praise be to the One True God of Heaven.
Copy linkTweet thisAlerts:
@mceles70Mar 06.2006 — hi,

i have a form which will accept master details and then based on the addrows input,

it will create a table with n (as per addros) rows and fixed columns.

then the user will input the entries in the table one by one.

first two columns and first two rows are headers and non nummeric columns

which dont need to be included in the calculation.

so my need is as the user inputs the value in each column

the corresponding total column which is in the last row should get updated with

the total ccolumns total.

Moreover I need all the columns to be totalled and displayed in a seperate field..

in my form there are more than one table..so how i get this particular table.../ if i use get elebyid, its also not working..?

example:


I have designed a input data-entry screen in ColdFusion.

A table with 5 columns. One columns of will have type of disk (three types only),

ANOTHER COLUMN WILL HAVE SIZE OF DISK(1, 2 AND 3) and another column will hold the value of no_of_disks.

in the screen i have designed as

type1 | type2 | type3

________|____________|________


SIZE|1 |2| 3 | 1 | 2 |3 |1| 2| 3 |

_____|__|_|___|____|____|__|_|__|___|

INPUT|__|_|___|____|____|__|_|__|___|

INPUT|__|_|___|____|____|__|_|__|___|

INPUT|__|_|___|____|____|__|_|__|___|
__ __ ___ ____ ___ __ _ __ ___
Total |__|_|___|____|____|__|_|__|___|

_


grand total ?_ |


Now i i will fix it in my code..?

Regards and thanks in advance
×

Success!

Help @betheball spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...