Hi Richard,
I don't think there's anything built into Prototype or script.aculo.us
that does the whole job, but certainly Prototype makes the job a lot
easier with its various DOM utilities and language helpers. It's
worth giving the API a read (1-2 hours max). That said, if you're not
much of a JavaScript guy, it may be worth outsourcing your client-side
stuff.
But here are a few building blocks:
Prototype's $$() function[1] finds elements based on CSS selectors, so
for instance, if all of the rows you want calculated are given the
class "calc", this finds them and gives you an (extended) array of
them:
var rows = $$('tr.calc');
You can also find descendent elements within a specific element using
Element#select[2]. So given a row element, this finds all of the
"relevant" cells and gives you an extended array of them:
var cells = row.select('td.relevant');
If you know that the cells you want to average contain *only* the text
of the number, you can access that text easily via the non-standard
(but widely-implemented) innerHTML property and turn that text into a
number with the JavaScript parseInt function:
value = parseInt(cell.innerHTML);
parseInt will return NaN if the text is not a number; you can test for
that with the JavaScript isNaN function. Obviously if the cell is
going to have more complicated contents, you'll have to handle those.
In terms of filling in the cell where you want to display the average,
you can assign an HTML string to innerHTML directly, or use
Prototype's Element#update[3] function to do it.
Bringing it all together, suppose you give the cells you want averaged
the CSS class "relevant" and the cell you want displaying the average
the class "avg", all within rows with the class "calc". This off-the-
cuff and largely-untested function will handle a given row:
* * * *
function calcRowAverage(row)
{
var avgcell;
var cells;
var total;
var count;
var val;
// Make sure this row has a place to put the average
avgcell = row.select('td.avg')[0];
if (avgcell)
{
// It does, get the relevant cells
cells = row.select('td.relevant');
// Get the average, allowing for empty/non-numeric cells
total = 0;
count = 0;
cells.each(function(cell){
val = parseInt(cell.innerHTML);
if (!isNaN(val))
{
total += val;
++count;
}
});
// Show the result
if (count > 0)
{
avgcell.update('' + (total / count));
}
else
{
avgcell.update('');
}
}
}
* * * *
In response to whatever your "we need to calculate" trigger/event is,
this fragment would recalculate all rows:
$$('tr.calc').each(calcRowAverage);
...using $$() and the Enumerable#each function[4] that Prototype mixes
into arrays. If your trigger/event is loading the page, you can
either use window.onload or better yet, the nifty "the DOM is loaded
and ready" event dom:loaded[5] that Prototype suppplies:
document.observe('dom:loaded', function() {
$$('tr.calc').each(calcRowAverage);
});
For help with various JavaScript and DOM things, I find the w3schools
website[6] offers decent beginner-level information. For the real
scoop, though, there's nothing like the specs.[7][8][9]
[1] http://prototypejs.org/api/utility/dollar-dollar
[2] http://prototypejs.org/api/element/select
[3] http://prototypejs.org/api/element/update
[4] http://prototypejs.org/api/enumerable/each
[5] http://prototypejs.org/api/document/observe
[6] http://www.w3schools.com
[7] http://www.ecma-international.org/publications/standards/Ecma-262.htm
[8] http://www.w3.org/DOM/DOMTR
[9] http://www.w3.org/Style/CSS/
HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Jan 13, 10:21 am, RNHurt <[email protected]> wrote:
> We are building a online gradebook system for teachers and one of the
> most important aspects is entering grades into a spreadsheet-like
> structure. The teachers need to see a students running average and my
> first thought was to build an HTML table and have Javascript do some
> calculations on the fly. These results do not have to be written back
> to the database, just displayed in the table.
>
> Since we are using Ruby on Rails and it is using Prototype &
> script.aculo.us I thought you guys might be able to help us. I don't
> think this is really too complex but I'm not much of a Javascript guy
> and would like to know the "best" way of doing something like this.
> If there is something already built-in to these two frameworks, even
> better!
>
> Thanx!
> Richard
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
