943,587 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Trying to parse through javascript collection object using Prototype
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Jul 6th, 2009
0

Trying to parse through javascript collection object using Prototype

Expand Post »
I have the following nested javascript collection (below) and I'm trying to access the information within the collection using prototype so I can properly style and layout the data. I'm stuck and would like to know if anybody could assist.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. var teams = {
  2.  
  3. "team1:" {
  4.                       "QB": "Alexander Hamilton",
  5.                       "RB": "John Jay",
  6.                       "WR": "James Madison"
  7.                   },
  8.  
  9. "team2:    {
  10.                        "QB": "George Washington",
  11.                        "RB": "John Adams",
  12.                       "WR": "John Hancock"
  13.  
  14.                   }
  15. };
  16.  
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Chad Gary is offline Offline
22 posts
since Jul 2009
Permalink
Jul 6th, 2009
0

Re: Trying to parse through javascript collection object using Prototype

You could try this:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. <?xml-stylesheet type="text/css" href="#css21" media="screen"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  4.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5. <html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head profile="http://www.w3.org/2005/10/profile">
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <meta http-equiv="Window-target" content="_top" />
  9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  10. <meta http-equiv="Content-Style-Type" content="text/css" />
  11. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  12. <title>Free Live Help!</title>
  13. <style id="css21" type="text/css" media="screen">
  14. /* <![CDATA[ */
  15.  
  16. /* ]]> */
  17. </style> 
  18. <script id="javascript1.5" type="text/javascript">
  19. // <![CDATA[
  20. var Teams = function() { };
  21.  
  22. Teams.prototype = {
  23. team1 : { 
  24. QB : "Alexander Hamilton",
  25. RB : "John Jay",
  26. WR : "James Madison" },
  27.  
  28. team2 : {
  29. QB : "George Washington",
  30. RB : "John Adams",
  31. WR : "John Hancock" }
  32. };
  33.  
  34. var teams = new Teams();
  35. window.onload = function() {
  36.  
  37. var div = (( document.getElementById ) ? document.getElementById("main") : document.all.main );
  38.    for ( var team in teams ) {
  39.    div.innerHTML += "<h3>" + team + "</h3>\n<p>";
  40.       for ( var member in teams[ team ] ) {
  41.       div.innerHTML += "Type : <span style=\"color : green\">" + member + "</span> - <span style=\"color : blue\">" + teams[ team ][ member ] + "</span><br />";
  42.       } div.innerHTML += "</p>";
  43.    }
  44. }
  45. // ]]>
  46. </script>
  47. </head>
  48. <body>
  49. <div id="main"></div>
  50. </body>
  51. </html>
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Jul 7th, 2009
0

Re: Trying to parse through javascript collection object using Prototype

Not realy sure, about what are you in doubt. Read more about the object definition and try this example:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <script>
  5. var teams = {
  6.  
  7.              "team1": {
  8.                        "QB": "Alexander Hamilton",
  9.                        "RB": "John Jay",
  10.                        "WR": "James Madison"
  11.                       },
  12.  
  13.              team2: {                             // key need not to be quoted
  14.                        "QB": "George Washington",
  15.                         RB : "John Adams",
  16.                        "WR": "John Hancock"
  17.  
  18.                       }
  19. };
  20. </script>
  21. </head>
  22. <body>
  23. The use of object teams: <br>
  24. <script>
  25. document.write(teams.team1.RB);document.write("<br>");
  26. document.write(teams["team2"].WR);document.write("<br>");
  27. document.write(teams['team1']["QB"]);document.write("<br>");
  28. document.write("<br>");
  29. for (var index in teams.team1)
  30. { document.write(index+"  "+teams.team1[index]);document.write("<br>");
  31. }
  32. document.write("<br>");
  33. for (var teamix in teams)
  34. { for (var index in teams[teamix])
  35.   { document.write(teamix+" / "+index+" is: "+teams[teamix][index]);document.write("<br>");
  36.   } document.write("<br>");
  37. }
  38. </script>
  39. </body>
  40. </html>
Reputation Points: 11
Solved Threads: 3
Light Poster
sysel is offline Offline
49 posts
since Jun 2009
Permalink
Aug 16th, 2009
0

Re: Trying to parse through javascript collection object using Prototype

Thanks,

Quote ...
I get the following json object back from a json_encode command that I'm using on the server-side. Is it possible to parse through this using javascript since it is missing names of inner objects (team1 and team2). If so, how?
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. [
  2. {"PlayerName":"Ron Artest","Position":"Forward","Height":"6-7","Weight":"260","College":"St. Johns"},
  3. {"PlayerName":"Kobe Bryant","Position":"Guard","Height":"6-6","Weight":"205","College":"Lower Marion High Sc"}
  4. ]
Click to Expand / Collapse  Quote originally posted by essential ...
You could try this:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. <?xml-stylesheet type="text/css" href="#css21" media="screen"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  4.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5. <html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head profile="http://www.w3.org/2005/10/profile">
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <meta http-equiv="Window-target" content="_top" />
  9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  10. <meta http-equiv="Content-Style-Type" content="text/css" />
  11. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  12. <title>Free Live Help!</title>
  13. <style id="css21" type="text/css" media="screen">
  14. /* <![CDATA[ */
  15.  
  16. /* ]]> */
  17. </style> 
  18. <script id="javascript1.5" type="text/javascript">
  19. // <![CDATA[
  20. var Teams = function() { };
  21.  
  22. Teams.prototype = {
  23. team1 : { 
  24. QB : "Alexander Hamilton",
  25. RB : "John Jay",
  26. WR : "James Madison" },
  27.  
  28. team2 : {
  29. QB : "George Washington",
  30. RB : "John Adams",
  31. WR : "John Hancock" }
  32. };
  33.  
  34. var teams = new Teams();
  35. window.onload = function() {
  36.  
  37. var div = (( document.getElementById ) ? document.getElementById("main") : document.all.main );
  38.    for ( var team in teams ) {
  39.    div.innerHTML += "<h3>" + team + "</h3>\n<p>";
  40.       for ( var member in teams[ team ] ) {
  41.       div.innerHTML += "Type : <span style=\"color : green\">" + member + "</span> - <span style=\"color : blue\">" + teams[ team ][ member ] + "</span><br />";
  42.       } div.innerHTML += "</p>";
  43.    }
  44. }
  45. // ]]>
  46. </script>
  47. </head>
  48. <body>
  49. <div id="main"></div>
  50. </body>
  51. </html>
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Chad Gary is offline Offline
22 posts
since Jul 2009
Permalink
Aug 17th, 2009
0

Re: Trying to parse through javascript collection object using Prototype

Hi Gary,

here's your code, i've extrcted all of its collections with the used of a table, but if don't like my concept of using table to differentiate the items inside the players collections -- then simply re-apply the same procedure in my original post, using the innerHTML method.

All codes is as follows:

javascript Syntax (Toggle Plain Text)
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <!-- W3Cs Standard Template : XHTML 1.0 Transitional DTD -->
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  9. <title>www.daniweb.com</title>
  10. <style type="text/css">
  11. /* <![CDATA[ */
  12.  
  13. table {
  14.   border-collapse : collapse;
  15.   border : 1px solid #C0C0C0;
  16.   color : #365895;
  17.   text-align : center;
  18.   width : 100%; }
  19. caption {
  20.   width : auto;
  21.   text-align : left;
  22.   margin-bottom : .500em;
  23.   padding-left : .500em; }
  24. td {
  25.   border-top : 1px solid #C0C0C0; 
  26.   border-right : 1px dashed #C0C0C0;
  27.   padding : .350em;
  28.   width : auto;
  29.   vertical-align : middle;
  30.   letter-spacing : 2px; }
  31. thead td {
  32.   background-color : #F0FFFF;
  33.   border-right : 1px dashed #C0C0C0;
  34.   padding : .350em;
  35.   font : bold 80%/1 "Trebuchet MS", Verdana, Arial, sans-serif; }
  36.  
  37. /* ]]> */
  38. </style>
  39. <script type="text/javascript">
  40. // <![CDATA[
  41.  
  42. window.onload = function() {
  43.    if ( document.createElement ) {
  44.    var players = [ 
  45. { PlayerName : "Ron Artest",
  46.   Position : "Forward",
  47.   Height : "6-7",
  48.   Weight : 260,
  49.   College : "St. Johns" },
  50. { PlayerName : "Kobe Bryant",
  51.   Position : "Guard",
  52.   Height : "6-6",
  53.   Weight : 205,
  54.   College : "Lower Marion High Sc" } ];
  55.    var container = document.getElementById("view");
  56.    var labels = [ "Name", "Position", "Height", "Weight", "College" ];
  57.    var table = document.createElement("table");
  58.    var tCaption = table.createCaption();
  59.    tCaption.appendChild( document.createTextNode("NBA :: Allstars Statistics-Table" ));
  60.    var tHead = table.createTHead();
  61.    var addCell = function( row, label ) {
  62.       return row.insertCell( -1 ).appendChild( document.createTextNode( label ));
  63.    };
  64.    var xrow = tHead.insertRow( -1 );
  65.    for ( var i = 0; labels[ i ]; i++ ) {
  66.       addCell( xrow, labels[ i ] );
  67.    } var tBody = document.createElement( "tbody" );
  68.    table.appendChild( tBody );
  69.    for ( i = 0; players[ i ]; i++ ) {
  70.       xrow = tBody.insertRow( -1 );
  71.       for ( var info in players[ i ] ) {
  72.          addCell( xrow, players[ i ][ info ] );
  73.       }
  74.    } container.appendChild( table );
  75.    return;
  76.    } alert( "unsupported features, please update your browser" );
  77.    return false;
  78. }
  79. // ]]>
  80. </script>
  81. </head>
  82. <body id="xhtml-10-transitional">
  83. <div id="view"></div> <!-- id :: view -->
  84. </body>
  85. </html>

hope it helps...
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Aug 18th, 2009
0

Re: Trying to parse through javascript collection object using Prototype

Thanks,
Quote ...
I getting a better understanding of parsing throuhg objects. Quick question. Wy won't the following work. I'm getting undefined when I try and execute the code.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1.  for(var player in players)
  2.         document.write(player["College"]);

Click to Expand / Collapse  Quote originally posted by essential ...
Hi Gary,

here's your code, i've extrcted all of its collections with the used of a table, but if don't like my concept of using table to differentiate the items inside the players collections -- then simply re-apply the same procedure in my original post, using the innerHTML method.

All codes is as follows:

javascript Syntax (Toggle Plain Text)
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <!-- W3Cs Standard Template : XHTML 1.0 Transitional DTD -->
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  9. <title>www.daniweb.com</title>
  10. <style type="text/css">
  11. /* <![CDATA[ */
  12.  
  13. table {
  14.   border-collapse : collapse;
  15.   border : 1px solid #C0C0C0;
  16.   color : #365895;
  17.   text-align : center;
  18.   width : 100%; }
  19. caption {
  20.   width : auto;
  21.   text-align : left;
  22.   margin-bottom : .500em;
  23.   padding-left : .500em; }
  24. td {
  25.   border-top : 1px solid #C0C0C0; 
  26.   border-right : 1px dashed #C0C0C0;
  27.   padding : .350em;
  28.   width : auto;
  29.   vertical-align : middle;
  30.   letter-spacing : 2px; }
  31. thead td {
  32.   background-color : #F0FFFF;
  33.   border-right : 1px dashed #C0C0C0;
  34.   padding : .350em;
  35.   font : bold 80%/1 "Trebuchet MS", Verdana, Arial, sans-serif; }
  36.  
  37. /* ]]> */
  38. </style>
  39. <script type="text/javascript">
  40. // <![CDATA[
  41.  
  42. window.onload = function() {
  43.    if ( document.createElement ) {
  44.    var players = [ 
  45. { PlayerName : "Ron Artest",
  46.   Position : "Forward",
  47.   Height : "6-7",
  48.   Weight : 260,
  49.   College : "St. Johns" },
  50. { PlayerName : "Kobe Bryant",
  51.   Position : "Guard",
  52.   Height : "6-6",
  53.   Weight : 205,
  54.   College : "Lower Marion High Sc" } ];
  55.    var container = document.getElementById("view");
  56.    var labels = [ "Name", "Position", "Height", "Weight", "College" ];
  57.    var table = document.createElement("table");
  58.    var tCaption = table.createCaption();
  59.    tCaption.appendChild( document.createTextNode("NBA :: Allstars Statistics-Table" ));
  60.    var tHead = table.createTHead();
  61.    var addCell = function( row, label ) {
  62.       return row.insertCell( -1 ).appendChild( document.createTextNode( label ));
  63.    };
  64.    var xrow = tHead.insertRow( -1 );
  65.    for ( var i = 0; labels[ i ]; i++ ) {
  66.       addCell( xrow, labels[ i ] );
  67.    } var tBody = document.createElement( "tbody" );
  68.    table.appendChild( tBody );
  69.    for ( i = 0; players[ i ]; i++ ) {
  70.       xrow = tBody.insertRow( -1 );
  71.       for ( var info in players[ i ] ) {
  72.          addCell( xrow, players[ i ][ info ] );
  73.       }
  74.    } container.appendChild( table );
  75.    return;
  76.    } alert( "unsupported features, please update your browser" );
  77.    return false;
  78. }
  79. // ]]>
  80. </script>
  81. </head>
  82. <body id="xhtml-10-transitional">
  83. <div id="view"></div> <!-- id :: view -->
  84. </body>
  85. </html>

hope it helps...
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Chad Gary is offline Offline
22 posts
since Jul 2009
Permalink
Aug 18th, 2009
0

Re: Trying to parse through javascript collection object using Prototype

Gary,

You've forgot the s' over the ( object ) players where it should be:

for ( var player in players ) {
   document.write( players[ "College" ] );
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Aug 23rd, 2009
0

Re: Trying to parse through javascript collection object using Prototype

Thanks Posting Shark,

Let's say instead of one object I get two objects back from the server the second object is the local address of the logo of the NBA team which I want to display in a div tag below the table with the players name. How would you go about doing this? I really appreciate all your help?

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. [
  2. {"PlayerName":"Ron Artest","Position":"Forward","Height":"6-7","Weight":"260","College":"St. Johns"},
  3. {"PlayerName":"Kobe Bryant","Position":"Guard","Height":"6-6","Weight":"205","College":"Lower Marion High Sc"}
  4. ][
  5. {"PlayerName":"Ron Artest","Position":"Forward","Height":"6-7","Weight":"260","College":"St. Johns"},
  6. {"PlayerName":"Kobe Bryant","Position":"Guard","Height":"6-6","Weight":"205","College":"Lower Marion High Sc"}
  7. ]
  8. [{"TeamLogo":"C:\\wamp\\wwwNBA\\laLakersLogo.gif"}]



Click to Expand / Collapse  Quote originally posted by essential ...
Hi Gary,

here's your code, i've extrcted all of its collections with the used of a table, but if don't like my concept of using table to differentiate the items inside the players collections -- then simply re-apply the same procedure in my original post, using the innerHTML method.

All codes is as follows:

javascript Syntax (Toggle Plain Text)
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <!-- W3Cs Standard Template : XHTML 1.0 Transitional DTD -->
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  9. <title>www.daniweb.com</title>
  10. <style type="text/css">
  11. /* <![CDATA[ */
  12.  
  13. table {
  14.   border-collapse : collapse;
  15.   border : 1px solid #C0C0C0;
  16.   color : #365895;
  17.   text-align : center;
  18.   width : 100%; }
  19. caption {
  20.   width : auto;
  21.   text-align : left;
  22.   margin-bottom : .500em;
  23.   padding-left : .500em; }
  24. td {
  25.   border-top : 1px solid #C0C0C0; 
  26.   border-right : 1px dashed #C0C0C0;
  27.   padding : .350em;
  28.   width : auto;
  29.   vertical-align : middle;
  30.   letter-spacing : 2px; }
  31. thead td {
  32.   background-color : #F0FFFF;
  33.   border-right : 1px dashed #C0C0C0;
  34.   padding : .350em;
  35.   font : bold 80%/1 "Trebuchet MS", Verdana, Arial, sans-serif; }
  36.  
  37. /* ]]> */
  38. </style>
  39. <script type="text/javascript">
  40. // <![CDATA[
  41.  
  42. window.onload = function() {
  43.    if ( document.createElement ) {
  44.    var players = [ 
  45. { PlayerName : "Ron Artest",
  46.   Position : "Forward",
  47.   Height : "6-7",
  48.   Weight : 260,
  49.   College : "St. Johns" },
  50. { PlayerName : "Kobe Bryant",
  51.   Position : "Guard",
  52.   Height : "6-6",
  53.   Weight : 205,
  54.   College : "Lower Marion High Sc" } ];
  55.    var container = document.getElementById("view");
  56.    var labels = [ "Name", "Position", "Height", "Weight", "College" ];
  57.    var table = document.createElement("table");
  58.    var tCaption = table.createCaption();
  59.    tCaption.appendChild( document.createTextNode("NBA :: Allstars Statistics-Table" ));
  60.    var tHead = table.createTHead();
  61.    var addCell = function( row, label ) {
  62.       return row.insertCell( -1 ).appendChild( document.createTextNode( label ));
  63.    };
  64.    var xrow = tHead.insertRow( -1 );
  65.    for ( var i = 0; labels[ i ]; i++ ) {
  66.       addCell( xrow, labels[ i ] );
  67.    } var tBody = document.createElement( "tbody" );
  68.    table.appendChild( tBody );
  69.    for ( i = 0; players[ i ]; i++ ) {
  70.       xrow = tBody.insertRow( -1 );
  71.       for ( var info in players[ i ] ) {
  72.          addCell( xrow, players[ i ][ info ] );
  73.       }
  74.    } container.appendChild( table );
  75.    return;
  76.    } alert( "unsupported features, please update your browser" );
  77.    return false;
  78. }
  79. // ]]>
  80. </script>
  81. </head>
  82. <body id="xhtml-10-transitional">
  83. <div id="view"></div> <!-- id :: view -->
  84. </body>
  85. </html>

hope it helps...
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Chad Gary is offline Offline
22 posts
since Jul 2009
Permalink
Aug 23rd, 2009
0

Re: Trying to parse through javascript collection object using Prototype

Posting Shark,
I made a mistake in my previous post and included three objects instead of two. Below is the correct number of objects
[
{"PlayerName":"Ron Artest","Position":"Forward","Height":"6-7","Weight":"260","College":"St. Johns"},
{"PlayerName":"Kobe Bryant","Position":"Guard","Height":"6-6","Weight":"205","College":"Lower Marion High Sc"}
]
[{"TeamLogo":"C:\\wamp\\wwwNBA\\laLakersLogo.gif"}]

Click to Expand / Collapse  Quote originally posted by Chad Gary ...
Thanks,


JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1.  for(var player in players)
  2.         document.write(player["College"]);
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Chad Gary is offline Offline
22 posts
since Jul 2009
Permalink
Aug 24th, 2009
0

Re: Trying to parse through javascript collection object using Prototype

Hi,

it will be alot more easier if you will grouped them as a team, instead of defining another object for the path of images just to display each logo.

In this approch i've used the document.writeln method, and created a table to differentiate each of the item inside the teams object variable.

javascript Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.    "http://www.w3.org/TR/html4/loose.dtd">
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <meta http-equiv="Content-Script-Type" content="text/javascript">
  7. <title>W3C HTML 4.01 loose DTD</title>
  8. <style type="text/css">
  9. <!--
  10. td {
  11.    border-right : 1px solid #A0A0A0;
  12.    border-top : 1px solid #A0A0A0;
  13.    background-color : #F1F1F1;
  14.    color : #405060; }
  15. th:first-child {
  16.    border-bottom : 1px solid #A0A0A0;
  17.    border-right : 1px solid #A0A0A0;
  18.    background-color : #800090;
  19.    color : yellow;
  20.    width : 25%;
  21. }
  22. table {
  23.    border : 1px solid #A0A0A0;
  24.    border-collapse : collapse;
  25.    text-align : left;
  26.    width : 100%; }
  27.  
  28. // -->
  29. </style>
  30. <script type="text/javascript">
  31. <!--
  32.  
  33. var teams = [ 
  34. { "LA Lakers" : {
  35.    "Team Logo" : "C:\\wamp\\wwwNBA\\laLakersLogo.gif",
  36.    Players : {
  37.       37 : { // Jersey n#
  38.          PlayerName : "Ron Artest",
  39.          Position : "Forward",
  40.          Height : "6-7",
  41.          Weight : "260",
  42.          College : "St. Johns" 
  43.          },
  44.       24 : {
  45.          PlayerName : "Kobe Bryant",
  46.          Position : "Guard",
  47.          Height : "6-6",
  48.          Weight : "205",
  49.          College : "Lower Marion High Sc"
  50.          }
  51.       }
  52.    }
  53. }
  54. // Add More NBA teams below >>>
  55.  ];
  56.  
  57. // -->
  58. </script>
  59. </head>
  60. <body>
  61. <noscript>
  62. <p> This site requires a browser that support <b>JavaScript</b>. </p> 
  63. </noscript>
  64. <div id="nbastats">
  65. <script type="text/javascript">
  66. <!--
  67. ( function() {
  68.    var tLen = teams.length;
  69.    var table = '<table id="tableOne" border="0" cellpadding="5" cellspacing="0" frame="void" rules="none" summary="NBA Statistic Table">\n';
  70.    for ( var x = 0; x < tLen; x++ ) {
  71.       table += "<tr>\n";
  72.       for ( var teamName in teams[ x ] ) {
  73.          table += "<th title=\"" + teamName + "\" colspan=\"3\">Team Name: </th>\n";
  74.          table += "<td colspan=\"3\">" + teamName + "</td>\n";
  75.          table += "</tr>\n";
  76.          table += "<tr>\n";
  77.          for ( var misc in teams[ x ][ teamName ] ) {
  78.             table += "<th colspan=\"3\">" + misc + "</th>\n";         
  79.          } table += "</tr>\n";
  80.          table += "<tr>\n";
  81.          var count = 10;
  82.          var image = new Image();
  83.          image.src = teams[ x ][ teamName ][ "Team Logo" ];
  84.          table += "<td style=\"background-color : #FFFFFF;\" rowspan=\"" + ( count += ( 1 * 10 )) + "\" colspan=\"3\"><img src=\"" + image.src + "\" alt=\"" + image.src + "\"></td>";
  85.          table += "</tr>\n";
  86.          for ( var j in teams[ x ][ teamName ][ misc ] ) {
  87.             for ( var player in teams[ x ][ teamName ][ misc ][ j ] ) {
  88.             table += "<tr>\n";
  89.             table += "<td style=\"text-align : center; background-color : #E0E0E0\">" + player + "</td><td>" + teams[ x ][ teamName ][ misc ][ j ][ player ] + "</td>\n";
  90.             table += "</tr>\n";
  91.             }
  92.          table += "<tr>\n";
  93.          table += "<td>Jersey no.</td><td>#" + j + "</td>\n";
  94.          table += "</tr>\n";
  95.          table += "<tr>\n";
  96.          table += "<td colspan=\"2\" style=\"background-color : #800090; height : 5px;\"> </td>\n";
  97.          table += "</tr>\n";
  98.          } 
  99.       }  
  100.    } table += "</table>";
  101.    document.writeln( table );
  102. } )( /* NBA Teams & Players */ )
  103. // -->
  104. </script>
  105. </div>
  106. </body>
  107. </html>

you can easily expand all procedures inside this function. Just be careful when you edit the lines'.
Last edited by essential; Aug 24th, 2009 at 5:29 am.
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: I want on mouse over image to happen like this . please provide the code
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Portable IDE for HTML/JavaScript





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC