PDA

View Full Version : table totals in table.js



klsblues
09-14-2009, 06:52 PM
I have downloaded some javascript (table.js) from http://www.javascripttoolbox.com/lib/table/index.php and it sorts, filters, etc any table.

I have contacted the author and asked if a sum of the columns (total) can be added to the footer of the table, once a filter has been applied. He has told me it can but it requires considerable knowledge of javascript and he has it on his list of 'to do's' but not for three or four months.

He has given me permission to change his script, but I haven't got a clue how to write javascript. Can anyone take a look and help?

To see where I intend to use it, have a look at http://www.klsblues.demon.co.uk/teamstats.htm, filter using any team name and I want the totals in the footer (currently blank).

Thanks in advance.

vwphillips
09-15-2009, 11:27 AM
filter using any team name and I want the totals in the footer (currently blank).
is that all you want to do with the table?
ie no other filtering of sorting

if so a new script may be best due to the complexity of your link code

klsblues
09-15-2009, 12:13 PM
Hi Vic,

Basically the table will contain 64 teams each comprising 11 players (rising to 20 as each transfer window opens). when the team manager selects his team, it filters his (11-20) players and shows the points of each player after each transfer window.

What I need is the footer to 'sum total' the points of each of the points columns once filtered.

Can you help?

Thanks - Kevin

vwphillips
09-16-2009, 07:34 AM
maybe tomorrow

klsblues
09-16-2009, 07:37 AM
Brilliant! - thanks Vic.

vwphillips
09-16-2009, 12:06 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-us">
<title>Team Details</title>
<META name="Author" content="Kevin Swallow">
<META name="copyright" content="&copy; 2009 KLSBLUES">
<base target="_top">
<link rel="stylesheet" type="text/css" href="http://www.klsblues.demon.co.uk/AccessOutput.css" />
<link rel="stylesheet" type="text/css" href="http://www.klsblues.demon.co.uk/ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="http://www.klsblues.demon.co.uk/ddlevelsfiles/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="http://www.klsblues.demon.co.uk/ddlevelsfiles/ddlevelsmenu-sidebar.css" />
<script type="text/javascript" >

function Filter(tid){
this.tbdy=document.getElementById(tid);
var rows=this.tbdy.getElementsByTagName('TR');
this.ary=[]
for (var z0=0;z0<rows.length;z0++){
this.ary.push(rows[z0]);
}
this.Filter('');
}

Filter.prototype.Filter=function(sel){
while (this.tbdy.firstChild){
this.tbdy.removeChild(this.tbdy.firstChild);
}
for (var z0=0;z0<this.ary.length;z0++){
if (this.ary[z0].getElementsByTagName('TD')[0].innerHTML==sel||sel==''){
this.tbdy.appendChild(this.ary[z0]);
}
}
var rows=this.tbdy.getElementsByTagName('TR');
for (var nu=0,z1=0;z1<rows.length;z1++){
nu+=rows[z1].getElementsByTagName('TD')[6].innerHTML*1;
}
var results=document.getElementById('results').getElementsByTagName('TH');
results[6].innerHTML=nu;
}

</script>
</head>
<body bgcolor="#F3F3F3" onload="F=new Filter('tst');">

<table align="center" class="table-autofilter"; "sortable" id="myScrollTable">
<thead>
<th class="table-filterable">
<tr>
<th>TEAMNAME
<select id="sel" onchange="F.Filter(this.value);">
<option value="" >Select Team</option>
<option value="3T's 2 Triumph" >3T's 2 Triumph</option>
<option value="AJ's Barking Army" >AJ's Barking Army</option>
</select>
</th>

<th>NAME</th>
<th>POSITION</th>
<th>CLUB</th>
<th>VALUE (M's)</th>
<th>ORIG</th>
<th>ORI PTS</th>
<th>OUT1</th>
<th>INW1</th>
<th>1st PTS</th>

<th>OUT2</th>
<th>INW2</th>
<th>2nd PTS</th>
<th>OUT3</th>
<th>INW3</th>
<th>3rd PTS</th>
<th>TTL PTS</th>
</tr>
</thead>
<tbody id="tst">
<tr>

<td align="left">3T's 2 Triumph</td>
<td align="left">D James</td>
<td align="left">G/K</td>
<td align="left">POR</td>
<td align="center">3.50</td>
<td align="left"><font color="#009900"size="3">&#x21D2;</font></td>
<td align="center">5</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>

<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="center">5</td>
</tr>
<tr>
<td align="left">3T's 2 Triumph</td>
<td align="left">J Belletti</td>
<td align="left">DEF</td>

<td align="left">CHE</td>
<td align="center">3.00</td>
<td align="left"><font color="#009900"size="3">&#x21D2;</font></td>
<td align="center">8</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>

<td align="center">0</td>
<td align="center">8</td>
</tr>
<tr>
<td align="left">3T's 2 Triumph</td>
<td align="left">F Aurelio</td>
<td align="left">DEF</td>
<td align="left">LIV</td>
<td align="center">4.00</td>
<td align="left"><font color="#009900"size="3">&#x21D2;</font></td>

<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="center">0</td>
</tr>

<tr>
<td align="left">3T's 2 Triumph</td>
<td align="left">F Lampard</td>
<td align="left">MID</td>

<td align="left">CHE</td>
<td align="center">8.50</td>
<td align="left"><font color="#009900"size="3">&#x21D2;</font></td>
<td align="center">18</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>

<td align="center">0</td>
<td align="center">18</td>
</tr>
<tr>
<td align="left">AJ's Barking Army</td>
<td align="left">B Myhill</td>
<td align="left">G/K</td>
<td align="left">HUL</td>
<td align="center">1.50</td>
<td align="left"><font color="#009900"size="3">&#x21D2;</font></td>

<td align="center">11</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="center">11</td>
</tr>

<tr>
<td align="left">AJ's Barking Army</td>
<td align="left">B Emerton</td>
<td align="left">DEF</td>
<td align="left">BLA</td>
<td align="center">2.50</td>
<td align="left"><font color="#009900"size="3">&#x21D2;</font></td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>

<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="center">0</td>
</tr>
<tr>
<td align="left">AJ's Barking Army</td>
<td align="left">A Dawson</td>
<td align="left">DEF</td>

<td align="left">HUL</td>
<td align="center">1.00</td>
<td align="left"><font color="#009900"size="3">&#x21D2;</font></td>
<td align="center">5</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>

<td align="center">0</td>
<td align="center">5</td>
</tr>
<tr>
<td align="left">AJ's Barking Army</td>
<td align="left">P Konchesky</td>
<td align="left">DEF</td>
<td align="left">FUL</td>
<td align="center">2.00</td>
<td align="left"><font color="#009900"size="3">&#x21D2;</font></td>

<td align="center">14</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="center">14</td>
</tr>
</tbody>
<tfoot>
<tr id="results">
<th align="right">&nbsp;</td>
<th align="left">&nbsp;</td>
<th align="left">&nbsp;</td>

<th align="left">&nbsp;</td>
<th align="right">&nbsp;</td>
<th align="right">&nbsp;</td>
<th align="left">&nbsp;</td>
<th align="left">&nbsp;</td>
<th align="left">&nbsp;</td>
<th align="right">&nbsp;</td>
<th align="left">&nbsp;</td>
<th align="left">&nbsp;</td>

<th align="right">&nbsp;</td>
<th align="left">&nbsp;</td>
<th align="left">&nbsp;</td>
<th align="right">&nbsp;</td>
<th align="right">&nbsp;</td>
</tr>
</tfoot>
</table>


</body>

</html>

klsblues
09-16-2009, 12:48 PM
Vic,

This is wonderful!! Thank you very much - BUT - (there's always a but isn't there?!) How do I sum more than one column (i.e columns 7,10,13, etc).

I tried changing this bit...

var rows=this.tbdy.getElementsByTagName('TR');
for (var nu=0,z1=0;z1<rows.length;z1++){
nu+=rows[z1].getElementsByTagName('TD')[6].innerHTML*1;
}
var results=document.getElementById('results').getElementsByTagName('TH');
results[6].innerHTML=nu;
}

... by putting [6,9] in both areas, but all this does is move the sum from '6' to '9'.

Any ideas?

Once again thanks - Kevin.

vwphillips
09-16-2009, 04:34 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-us">
<title>Team Details</title>
<META name="Author" content="Kevin Swallow">
<META name="copyright" content="&copy; 2009 KLSBLUES">
<base target="_top">
<link rel="stylesheet" type="text/css" href="http://www.klsblues.demon.co.uk/AccessOutput.css" />
<link rel="stylesheet" type="text/css" href="http://www.klsblues.demon.co.uk/ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="http://www.klsblues.demon.co.uk/ddlevelsfiles/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="http://www.klsblues.demon.co.uk/ddlevelsfiles/ddlevelsmenu-sidebar.css" />
<script type="text/javascript" >

function Filter(tid){
this.tbdy=document.getElementById(tid);
var rows=this.tbdy.getElementsByTagName('TR');
this.ary=[]
for (var z0=0;z0<rows.length;z0++){
this.ary.push(rows[z0]);
}
this.Filter('');
}

Filter.prototype.Filter=function(sel){
while (this.tbdy.firstChild){
this.tbdy.removeChild(this.tbdy.firstChild);
}
for (var z0=0;z0<this.ary.length;z0++){
if (this.ary[z0].getElementsByTagName('TD')[0].innerHTML==sel||sel==''){
this.tbdy.appendChild(this.ary[z0]);
}
}
var rows=this.tbdy.getElementsByTagName('TR');
for (var nu,nu6=0,nu7=0,nu10=0,nu13=0,z1=0;z1<rows.length;z1++){
nu=rows[z1].getElementsByTagName('TD')[6].innerHTML;
if (!isNaN(nu)){
nu6+=nu*1;
}
nu=rows[z1].getElementsByTagName('TD')[7].innerHTML;
if (!isNaN(nu)){
nu7+=nu*1;
}
nu=rows[z1].getElementsByTagName('TD')[10].innerHTML;
if (!isNaN(nu)){
nu10+=nu*1;
}
nu=rows[z1].getElementsByTagName('TD')[13].innerHTML;
if (!isNaN(nu)){
nu13+=nu*1;
}
}
var results=document.getElementById('results').getElementsByTagName('TH');
results[6].innerHTML=nu6;
results[7].innerHTML=nu7;
results[10].innerHTML=nu10;
results[13].innerHTML=nu13;
}

</script>
</head>
<body bgcolor="#F3F3F3" onload="F=new Filter('tst');">

<table align="center" class="table-autofilter"; "sortable" id="myScrollTable">
<thead>
<th class="table-filterable">
<tr>
<th>TEAMNAME
<select id="sel" onchange="F.Filter(this.value);">
<option value="" >Select Team</option>
<option value="3T's 2 Triumph" >3T's 2 Triumph</option>
<option value="AJ's Barking Army" >AJ's Barking Army</option>
</select>
</th>

<th>NAME</th>
<th>POSITION</th>
<th>CLUB</th>
<th>VALUE (M's)</th>
<th>ORIG</th>
<th>ORI PTS</th>
<th>OUT1</th>
<th>INW1</th>
<th>1st PTS</th>

<th>OUT2</th>
<th>INW2</th>
<th>2nd PTS</th>
<th>OUT3</th>
<th>INW3</th>
<th>3rd PTS</th>
<th>TTL PTS</th>
</tr>
</thead>
<tbody id="tst">
<tr>

<td align="left">3T's 2 Triumph</td>
<td align="left">D James</td>
<td align="left">G/K</td>
<td align="left">POR</td>
<td align="center">3.50</td>
<td align="left"><font color="#009900"size="3">&#x21D2;</font></td>
<td align="center">5</td>
<td align="left">7</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>

<td align="left">8</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">9</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="center">5</td>
</tr>
<tr>
<td align="left">3T's 2 Triumph</td>
<td align="left">J Belletti</td>
<td align="left">DEF</td>

<td align="left">CHE</td>
<td align="center">3.00</td>
<td align="left"><font color="#009900"size="3">&#x21D2;</font></td>
<td align="center">8</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>

<td align="center">0</td>
<td align="center">8</td>
</tr>
<tr>
<td align="left">3T's 2 Triumph</td>
<td align="left">F Aurelio</td>
<td align="left">DEF</td>
<td align="left">LIV</td>
<td align="center">4.00</td>
<td align="left"><font color="#009900"size="3">&#x21D2;</font></td>

<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="center">0</td>
</tr>

<tr>
<td align="left">3T's 2 Triumph</td>
<td align="left">F Lampard</td>
<td align="left">MID</td>

<td align="left">CHE</td>
<td align="center">8.50</td>
<td align="left"><font color="#009900"size="3">&#x21D2;</font></td>
<td align="center">18</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>

<td align="center">0</td>
<td align="center">18</td>
</tr>
<tr>
<td align="left">AJ's Barking Army</td>
<td align="left">B Myhill</td>
<td align="left">G/K</td>
<td align="left">HUL</td>
<td align="center">1.50</td>
<td align="left"><font color="#009900"size="3">&#x21D2;</font></td>

<td align="center">11</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="center">11</td>
</tr>

<tr>
<td align="left">AJ's Barking Army</td>
<td align="left">B Emerton</td>
<td align="left">DEF</td>
<td align="left">BLA</td>
<td align="center">2.50</td>
<td align="left"><font color="#009900"size="3">&#x21D2;</font></td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>

<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="center">0</td>
</tr>
<tr>
<td align="left">AJ's Barking Army</td>
<td align="left">A Dawson</td>
<td align="left">DEF</td>

<td align="left">HUL</td>
<td align="center">1.00</td>
<td align="left"><font color="#009900"size="3">&#x21D2;</font></td>
<td align="center">5</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>

<td align="center">0</td>
<td align="center">5</td>
</tr>
<tr>
<td align="left">AJ's Barking Army</td>
<td align="left">P Konchesky</td>
<td align="left">DEF</td>
<td align="left">FUL</td>
<td align="center">2.00</td>
<td align="left"><font color="#009900"size="3">&#x21D2;</font></td>

<td align="center">14</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="left">&nbsp;</td>
<td align="left">&nbsp;</td>
<td align="center">0</td>
<td align="center">14</td>
</tr>
</tbody>
<tfoot>
<tr id="results">
<th align="right">&nbsp;</td>
<th align="left">&nbsp;</td>
<th align="left">&nbsp;</td>

<th align="left">&nbsp;</td>
<th align="right">&nbsp;</td>
<th align="right">&nbsp;</td>
<th align="left">&nbsp;</td>
<th align="left">&nbsp;</td>
<th align="left">&nbsp;</td>
<th align="right">&nbsp;</td>
<th align="left">&nbsp;</td>
<th align="left">&nbsp;</td>

<th align="right">&nbsp;</td>
<th align="left">&nbsp;</td>
<th align="left">&nbsp;</td>
<th align="right">&nbsp;</td>
<th align="right">&nbsp;</td>
</tr>
</tfoot>
</table>


</body>

</html>

klsblues
09-16-2009, 05:43 PM
Thank You, thank you, thank you!!

Lovely script - I can apply this to several places on my site.

Kind regards - Kevin.