CSS Codes
CSS Layouts
Results 1 to 9 of 9

Thread: table totals in table.js

  1. 09-14-2009, 06:52 PM #1
    klsblues
    klsblues is offline Junior Coders
    Join Date
    Sep 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default table totals in table.js

    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.
    Last edited by klsblues; 09-14-2009 at 07:15 PM. Reason: missed out the word column
    Reply With Quote Reply With Quote
  2. 09-15-2009, 11:27 AM #2
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote
  3. 09-15-2009, 12:13 PM #3
    klsblues
    klsblues is offline Junior Coders
    Join Date
    Sep 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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
    Reply With Quote Reply With Quote
  4. 09-16-2009, 07:34 AM #4
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    maybe tomorrow
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote
  5. 09-16-2009, 07:37 AM #5
    klsblues
    klsblues is offline Junior Coders
    Join Date
    Sep 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Brilliant! - thanks Vic.
    Reply With Quote Reply With Quote
  6. 09-16-2009, 12:06 PM #6
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote
  7. 09-16-2009, 12:48 PM #7
    klsblues
    klsblues is offline Junior Coders
    Join Date
    Sep 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.
    Reply With Quote Reply With Quote
  8. 09-16-2009, 04:34 PM #8
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote

  9. The Following User Says Thank You to vwphillips For This Useful Post:

    klsblues (09-16-2009)
  10. 09-16-2009, 05:43 PM #9
    klsblues
    klsblues is offline Junior Coders
    Join Date
    Sep 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank You, thank you, thank you!!

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

    Kind regards - Kevin.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules