Javascript with many big tables

@rogkFeb 12.2015

Hi,

I would like to hear your opinion. I have 40 tables and there are 11 rows in every table. Is this the best way to put information to these table using Javascript?

[code=html]<html> <head> <title>Javascript Variables</title> </head> <body> <table id=”round” width=”400px”> <script type=”text/javascript”> var game = new Array();

game[0] = new Array( “07.02.15”, “14.00”, “Team 1-Team 2”, “4-2” ); game[1] = new Array( “07.02.15”, “15.00”, “Team 3-Team 4”, “2-2” ); game[2] = new Array( “08.02.15”, “16.00”, “Team 5-Team 6”, “0-0” );

var myTable= “<tr><td>Date</td><td>Time</td><td>Game</td><td>Tulos</td></tr>”; myTable+=”<td>” + game[0][0] + “</td><td>” + game[0][1] +”</td><td>” + game[0][2] + “</td><td>” + game[0][3] +”</td></tr>”; myTable+=”<td>” + game[1][0] + “</td><td>” + game[1][1] +”</td><td>” + game[1][2] + “</td><td>” + game[1][3] +”</td></tr>”; myTable+=”<td>” + game[2][0] + “</td><td>” + game[2][1] +”</td><td>” + game[2][2] + “</td><td>” + game[2][3] +”</td></tr>”;

document.getElementById(’round’).innerHTML = myTable;

</script> </table> </body> </html>[/code]

to post a comment

JavaScript

9 Comments(s) _↴

@Sup3rkirbyFeb 12.2015 — #First I'll just note that it would be a good habit to start putting your [B]<script>[/B] tags at the end of your HTML code (just before the closing [B]</body>[/B] tag).

Anyway, I tend to like to store tabular data in an object rather than a plain array. I would say that it honestly doesn't matter too much in the sense that, if you prefer to store it in a multidimensional array and have working code that you understand, go with it. Using an object just tends to make it more 'human-friendly' and readable. Plus it can be easier to loop through and build the table's HTML from scratch in javascript.

So I'd set it up like this:

[code=html]
 <!doctype html>
 <html>
 <head>
 <title>Javascript Variables</title>
 </head>
 <body>
 
  <table id="round" width="400px"></table>
 
  <script type="text/javascript">
   (function(){
   var game = {
   "headers": ["Date", "Time", "Game", "Tulos"],
   "data": [
   {"Date": "07.02.15", "Time": "14.00", "Game": "Team 1-Team 2", "Tulos": "4-2"},
   {"Date": "07.02.15", "Time": "15.00", "Game": "Team 3-Team 4", "Tulos": "2-2"},
   {"Date": "08.02.15", "Time": "16.00", "Game": "Team 5-Team 6", "Tulos": "0-0"}
   ]
   },
   $HTML = '<tr>';
   for(var $i = 0; $i < game["headers"].length; $i++) $HTML += '<td>' + game["headers"][$i] + '</td>';
   $HTML += '</tr>';
 
   for(var $j = 0; $j < game["data"].length; $j++) {
   $HTML += '<tr>';
   for(var $k = 0; $k < game["headers"].length; $k++) $HTML += '<td>' + game["data"][$j][game["headers"][$k]] + '</td>';
   $HTML += '</tr>';
   }
 
   document.getElementById('round').innerHTML = $HTML;
   })();
  </script>
 
 </body>
 </html>
 [/code]

To be fair, it may seem like a little more code and more complicated, but the larger your table gets, the better this method would become. Since it's using a loop and building the table from scratch, this code can stay the same and you would only need to update the [B]game[/B] variable with new data.

@JMRKERFeb 12.2015 — #Following uses your small data array example with 3 rows rather than 11,

but you should be able to easily expand on the initial concept.

I made only small changes to your arrays because I don't like to type a bunch.

<i>
 </i>&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;title&gt; toTable Examples &lt;/title&gt;
 
 &lt;style type="text/css"&gt;
 #tableDIV th { background-color:#ffff00; }
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;div id="tableDIV"&gt;&lt;/div&gt; &lt;p&gt;
 
 &lt;script type="text/javascript"&gt;
 var tbl0 = [  // sample: array of arrays format
 ['Date','Time','Game','Tulos'],
 ["07.02.15", "14.00", "Team 1-Team 2", "4-2"],
 ["07.02.15", "15.00", "Team 3-Team 4", "2-2"],
 ["07.02.15", "16.00", "Team 5-Team 6", "0-0"]
 ];
 var tbl1 = [  <br/>
 ['Date','Time','Game','Tulos'],
 ["07.09.15", "14.00", "Team 1-Team 4", "4-2"],
 ["07.09.15", "15.00", "Team 3-Team 6", "2-2"],
 ["07.09.15", "16.00", "Team 5-Team 2", "0-0"]
 ];
 var tbl2 = [  <br/>
 ['Date','Time','Game','Tulos'],
 ["07.16.15", "14.00", "Team 1-Team 6", "4-2"],
 ["07.16.15", "15.00", "Team 3-Team 2", "2-2"],
 ["07.16.15", "16.00", "Team 5-Team 4", "0-0"]
 ];
 var tbl3 = [ 
 ['Date','Time','Game','Tulos'],
 ["07.23.15", "14.00", "Team 2-Team 1", "4-2"],
 ["07.23.15", "15.00", "Team 4-Team 3", "2-2"],
 ["07.23.15", "16.00", "Team 6-Team 5", "0-0"]
 ];
 var tbl4 = [ 
 ['Date','Time','Game','Tulos'],
 ["07.30.15", "14.00", "Team 2-Team 3", "4-2"],
 ["07.30.15", "15.00", "Team 4-Team 5", "2-2"],
 ["07.30.15", "16.00", "Team 6-Team 1", "0-0"]
 ];
 var tbl5 = [  <br/>
 ['Date','Time','Game','Tulos'],
 ["08.06.15", "14.00", "Team 2-Team 5", "4-2"],
 ["08.06.15", "15.00", "Team 4-Team 1", "2-2"],
 ["08.06.15", "16.00", "Team 6-Team 3", "0-0"]
 ];
 
 Array.prototype.toTable = function(bdr, wide) {
 var str = '&lt;table border="'+bdr+'" width="'+wide+'"&gt;';
 var trec = this.shift();
 str += '&lt;thead&gt;&lt;tr&gt;&lt;th&gt;'+trec.join('&lt;/th&gt;&lt;th&gt;')+'&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;';
 for (var r=0; r&lt;this.length; r++) {
 str += '&lt;tr&gt;&lt;td&gt;'+this[r].join('&lt;/td&gt;&lt;td&gt;')+'&lt;/td&gt;&lt;/tr&gt;';
 }   str += '&lt;/tbody&gt;&lt;/table&gt;&lt;p&gt;';
 return str;
 }
 
 window.onload = function() {
 document.getElementById('tableDIV').innerHTML += tbl0.toTable('3',"30%");
 document.getElementById('tableDIV').innerHTML += tbl1.toTable('3',"30%");
 document.getElementById('tableDIV').innerHTML += tbl2.toTable('3',"30%");
 document.getElementById('tableDIV').innerHTML += tbl3.toTable('3',"30%");
 document.getElementById('tableDIV').innerHTML += tbl4.toTable('3',"30%");
 document.getElementById('tableDIV').innerHTML += tbl5.toTable('3',"30%");
 }
 &lt;/script&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

I would suggest putting the tbl# arrays into an external JS file to make it easier to edit and not worry about

corrupting the original script file.

Another idea would be to place dates, times, teams and scores into a spreadsheet and export as a CSV file.

They you could modify one file per week of games instead of 40 arrays and read the file with an AJAX call.

@rogkauthorFeb 13.2015 — #Thanks guys! You have helped me a lot. [B]JMRKER[/B], I like your script very much but I have thought what [B]Sup3rkirby[/B] said about understanding the script. I think I SHOULD understant the script which I am going to use. I am going to save your scripts and study them later. But at the moment I must use my script but would you please help a beginner with one more thing?

I give you my script. This first part is on my html-page.

[CODE]function myFunction() {
 var x = document.getElementById("mySelect").value;
 if (x == 1) {
 document.getElementById("round").innerHTML = round_1;
 } else if (x == 2) {
 var game = new Array();
 game[0] = new Array( "07.02.15", "18.00", "team 1-team 2", "4-2" );
 game[1] = new Array( "07.02.15", "18.15", "team 3-team 4", "2-2" );
 game[2] = new Array( "08.02.15", "19.00", "team 5-team 6", "0-0" );
 
 var myTable= "<tr><td>Date</td><td>Time</td><td>Game</td><td>Result</td></tr>";
 myTable+="<td>" + game[0][0] + "</td><td>" + game[0][1] +"</td><td>" + game[0][2] + "</td><td>" + game[0][3] +"</td></tr>";
 myTable+="<td>" + game[1][0] + "</td><td>" + game[1][1] +"</td><td>" + game[1][2] + "</td><td>" + game[1][3] +"</td></tr>";
 myTable+="<td>" + game[2][0] + "</td><td>" + game[2][1] +"</td><td>" + game[2][2] + "</td><td>" + game[2][3] +"</td></tr>";
 
 document.getElementById('round').innerHTML = myTable;
 } else if (x == 3) {[/CODE]

So, [I]else if (x == 2)[/I] works very well, because I have put the code inline. But [I]else if (x == 1)[/I] doen't work and the script is in the external file. It writes all the lines of the script from the external file. And here is what I have put to the external file.

[CODE]function round_1(){
 var game = new Array();
 game[0] = new Array( "07.02.15", "14.00", "Team 1-Team 2", "4-2" );
 game[1] = new Array( "07.02.15", "15.00", "Team 3-Team 4", "2-2" );
 game[2] = new Array( "08.02.15", "16.00", "Team 5-Team 6", "0-0" );
 var myTable= "<tr><td>Date</td><td>Time</td><td>Game</td><td>Result</td></tr>";
 myTable+="<td>" + game[0][0] + "</td><td>" + game[0][1] +"</td><td>" + game[0][2] + "</td><td>" + game[0][3] +"</td></tr>";
 myTable+="<td>" + game[1][0] + "</td><td>" + game[1][1] +"</td><td>" + game[1][2] + "</td><td>" + game[1][3] +"</td></tr>";
 myTable+="<td>" + game[2][0] + "</td><td>" + game[2][1] +"</td><td>" + game[2][2] + "</td><td>" + game[2][3] +"</td></tr>";
 }[/CODE]

I think this is very basic stuff of the Javascript, but would you help me with this, please. I know that the scripts should be in the external file and I am trying to do it. I have managed to do it before but not in this case.

@JMRKERFeb 13.2015 — #In you last post the first code block is not HTML and it is incomplete.

If you want to ask questions about my script, I will be glad to answer.

I'm sure 'Sup3rkirby' would do the same with his post.

But, I don't have a lot of time to continue to review incomplete code

and I definitely don't have time to write it for you.

It is difficult to guess what the problem is with your external files

without seeing what you have done. If you don't have a live site for testing,

at least post the relevant code that you are using.

@rogkauthorFeb 13.2015 — #I am very very sorry. I am new in this forum and my first language isn't English so I make lot's of mistakes. I try to do my best.

Here is a short version of my html-page. The actual one has more code and there will be 40 tables (it isn't ready yet). When the page opens it will show only one table (that is my plan) and the reader can select more to see in case he wants to do that.

Here is the short version of my page but I think you see with this why doesn't it work. The script of the external file I have put earlier.

[code=html]<!doctype html>
 <html>
 <head>
 <title>Harjoittelua</title>
 <script type="text/javascript" src="koodit.js">
 </script> 
 </head>
 <body>
 <div id="teksti_div"> 
 <h2>Ottelukierros</h2>
 <select id="mySelect" onchange="myFunction()">
 <option value="1">1
 <option value="2">2
 </select>
 <table id="round" align="center" width="380px">
 <script>
 function myFunction() {
 var x = document.getElementById("mySelect").value;
 if (x == 1) {
 document.getElementById("round").innerHTML = round_1;
 } else if (x == 2) {
 var game = new Array();
 game[0] = new Array( "07.02.15", "18.00", "team 1-team 2", "4-2" );
 game[1] = new Array( "07.02.15", "18.15", "team 3-team 4", "2-2" );
 game[2] = new Array( "08.02.15", "19.00", "team 5-team 6", "0-0" );
 
 var myTable= "<tr><td>Date</td><td>Time</td><td>Game</td><td>Result</td></tr>";
 myTable+="<td>" + game[0][0] + "</td><td>" + game[0][1] +"</td><td>" + game[0][2] + "</td><td>" + game[0][3] +"</td></tr>";
 myTable+="<td>" + game[1][0] + "</td><td>" + game[1][1] +"</td><td>" + game[1][2] + "</td><td>" + game[1][3] +"</td></tr>";
 myTable+="<td>" + game[2][0] + "</td><td>" + game[2][1] +"</td><td>" + game[2][2] + "</td><td>" + game[2][3] +"</td></tr>";
 
 document.getElementById('round').innerHTML = myTable;
 }
 }
 </script>
 </table> 
 </div> 
 </body>
 </html>[/code]

JMRKER, of course I would like to use your code but I don't know how to link it from the external file to the html-page. An other thing is to put the HTML attributes to the table, like different width options to the "td"-tags. I have learnt a lot during a very little time but it takes "a while" to learn to use Javascript. It helps me that 8-9 years ago I studied Delphi but I had to leave it because I didn't have the time. Now everyting has changed.

@Sup3rkirbyFeb 13.2015 — #Okay, so the problem with your first [B]if()[/B] statement ([B][I]if (x == 1)[/I][/B]) is that you are trying to set the [B]innerHTML[/B] (which is a string/text value) equal to [B]round_1[/B]. However, [B]round_1[/B] is a function (not a string).

Now, to be completely fair, you [B][I]*could*[/I][/B] still set the [B]innerHTML[/B] value to a function, but then the function must have a '[I]return[/I]' value. Otherwise the function won't send any data to the [B]innerHTML[/B] value. So to correct this you would use this in your koodit.js file:

[CODE]
 function round_1(){
 var game = new Array();
 game[0] = new Array( "07.02.15", "14.00", "Team 1-Team 2", "4-2" );
 game[1] = new Array( "07.02.15", "15.00", "Team 3-Team 4", "2-2" );
 game[2] = new Array( "08.02.15", "16.00", "Team 5-Team 6", "0-0" );
 
  var myTable= "<tr><td>Date</td><td>Time</td><td>Game</td><td>Result</td></tr>";
  myTable+="<td>" + game[0][0] + "</td><td>" + game[0][1] +"</td><td>" + game[0][2] + "</td><td>" + game[0][3] +"</td></tr>";
  myTable+="<td>" + game[1][0] + "</td><td>" + game[1][1] +"</td><td>" + game[1][2] + "</td><td>" + game[1][3] +"</td></tr>";
  myTable+="<td>" + game[2][0] + "</td><td>" + game[2][1] +"</td><td>" + game[2][2] + "</td><td>" + game[2][3] +"</td></tr>";
 
  return myTable;
 }
 [/CODE]

This gets you closer, but it doesn't fix everything. The other important thing to know about calling functions is that they must have parenthesis at the end in order to actually call the function.

And so in your main HTML file, inside of myFunction() you'll want to update your first [B]if()[/B] statement to this:

[CODE]
 document.getElementById("round").innerHTML = round_1();
 [/CODE]

With those two changes, when the first [B]if()[/B] statement is true, it will call the [B]round_1()[/B] function and this function will now [I]return[/I] a value to be placed in the [B]innerHTML[/B] on your page.

@JMRKERFeb 13.2015 — #OK, I'll try once more.

Some [SIZE=3][COLOR="#FF0000"]assumptions made[/COLOR][/SIZE] here ...

1. You are putting the main HTML file and the JS external file in the same directory. If not, some adjustments must be made.

2. Your external JS file reference, [COLOR="#FF0000"]'koodit.js', contains valid and working code[/COLOR].

Any errors anywhere cause entire script to fail.

Remove it, if not necessary, from this particular program as I never reference it in my code below.

3. You can set the column width of the tables by changing the numbers in the <style> element using CSS. Current are just examples.

4. You can add more teams and rounds as needed to you external JS file. Note the number of switch (x) choices will match the <select> options.

5. You can do a google search for the javascript commands you don't understand to see how they are being used in this program.

6. You'll give us specific error messages if the code does not work instead of going back to that original code or the last one you posted.

Unless there are some errors that cannot be corrected,

you need to start modernizing your code understanding with HTML, JS and CSS working together.

7. If you can learn Delphi, you can learn JS. I've done both.

Main HTML program file contents, say '[SIZE=5]season.html[/SIZE]':

<i>
 </i>&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;title&gt; season.html &lt;/title&gt;
 
 &lt;style type="text/css"&gt;
 #tableDIV th { background-color:#ffff00; } /* change color of heading */
 
 /* change following 4 class widths to make table column different sizes */
 .thDate { width:30%; }
 .thTime { width:10%; }
 .thGame { width:50%; }
 .thTulos { width:10%; }
 
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;h2&gt;Ottelukierros&lt;/h2&gt;
 &lt;select id="mySelect" onchange="myFunction(this.value)"&gt;
 &lt;option value=""&gt;Select&lt;/option&gt;
 &lt;option value="0"&gt;1
 &lt;option value="1"&gt;2
 &lt;option value="2"&gt;3
 &lt;option value="3"&gt;4
 &lt;option value="4"&gt;5
 &lt;option value="5"&gt;6
 &lt;/select&gt;
 
 &lt;div id="tableDIV"&gt;&lt;/div&gt; &lt;p&gt;
 
 &lt;script type="text/javascript" src="koodit.js"&gt;  &lt;!-- unknown contents.  remove line if not needed --&gt;
 
 &lt;script type="text/javascript" src="rounds.js"&gt; &lt;!-- season dates, times, teams and totals --&gt;
 
 &lt;script type="text/javascript"&gt;
 Array.prototype.toTable = function() {
 var arr = this.slice(0);
 var str = '&lt;table border="3" width="380px" align="center"&gt;';  // change border and width of table here
 var trec = arr.shift();  // get first row of array
 str += '&lt;thead&gt;&lt;tr&gt;';
 str += '&lt;th class="thDate"&gt;'+trec[0]+'&lt;/th&gt;';  // Date
 str += '&lt;th class="thTime"&gt;'+trec[1]+'&lt;/th&gt;';  // Time
 str += '&lt;th class="thGame"&gt;'+trec[2]+'&lt;/th&gt;';  // Game
 str += '&lt;th class="thTulos"&gt;'+trec[3]+'&lt;/th&gt;'; // Tulos
 str += '&lt;/tr&gt;&lt;/thead&gt;';
 str += '&lt;tbody&gt;';
 for (var r=0; r&lt;arr.length; r++) { // display contents of rest of array
 str += '&lt;tr&gt;&lt;td&gt;'+arr[r].join('&lt;/td&gt;&lt;td&gt;')+'&lt;/td&gt;&lt;/tr&gt;';
 }   str += '&lt;/tbody&gt;'
 str += '&lt;/table&gt;&lt;p&gt;';
 return str;
 }
 
 function myFunction(x) {
 switch (x) {
 case '0': document.getElementById('tableDIV').innerHTML = tbl0.toTable(); break;
 case '1': document.getElementById('tableDIV').innerHTML = tbl1.toTable(); break;
 case '2': document.getElementById('tableDIV').innerHTML = tbl2.toTable(); break;
 case '3': document.getElementById('tableDIV').innerHTML = tbl3.toTable(); break;
 case '4': document.getElementById('tableDIV').innerHTML = tbl4.toTable(); break;
 case '5': document.getElementById('tableDIV').innerHTML = tbl5.toTable(); break;
 default : document.getElementById('tableDIV').innerHTML = 'Select GAME to display'; break;
 }
 }
 
 window.onload = function() { myFunction('0'); }  // set to myFunction('') to NOT display a table at the start
 &lt;/script&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

External JS file contents, called '[SIZE=5]rounds.js[/SIZE]' here:

<i>
 </i>// rounds.js
 var tbl0 = [  // sample: array of arrays format
 ['Date','Time','Game','Tulos'],
 ["07.02.15", "14.00", "Team 1-Team 2", "4-2"],
 ["07.02.15", "15.00", "Team 3-Team 4", "2-2"],
 ["07.02.15", "16.00", "Team 5-Team 6", "0-0"]
 ];
 var tbl1 = [  <br/>
 ['Date','Time','Game','Tulos'],
 ["07.09.15", "14.00", "Team 1-Team 4", "4-2"],
 ["07.09.15", "15.00", "Team 3-Team 6", "2-2"],
 ["07.09.15", "16.00", "Team 5-Team 2", "0-0"]
 ];
 var tbl2 = [  <br/>
 ['Date','Time','Game','Tulos'],
 ["07.16.15", "14.00", "Team 1-Team 6", "4-2"],
 ["07.16.15", "15.00", "Team 3-Team 2", "2-2"],
 ["07.16.15", "16.00", "Team 5-Team 4", "0-0"]
 ];
 var tbl3 = [ 
 ['Date','Time','Game','Tulos'],
 ["07.23.15", "14.00", "Team 2-Team 1", "4-2"],
 ["07.23.15", "15.00", "Team 4-Team 3", "2-2"],
 ["07.23.15", "16.00", "Team 6-Team 5", "0-0"]
 ];
 var tbl4 = [ 
 ['Date','Time','Game','Tulos'],
 ["07.30.15", "14.00", "Team 2-Team 3", "4-2"],
 ["07.30.15", "15.00", "Team 4-Team 5", "2-2"],
 ["07.30.15", "16.00", "Team 6-Team 1", "0-0"]
 ];
 var tbl5 = [  <br/>
 ['Date','Time','Game','Tulos'],
 ["08.06.15", "14.00", "Team 2-Team 5", "4-2"],
 ["08.06.15", "15.00", "Team 4-Team 1", "2-2"],
 ["08.06.15", "16.00", "Team 6-Team 3", "0-0"]
 ];

Note: You could also put the CSS <style> code in an external file also, but we'll not confuse you more at this time.

We'll save that lesson for a future day.

@rogkauthorFeb 14.2015 — #Thank you very much. You have helped me a lot. Now both of those scripts are functioning. [B]JMRKER[/B], I took off the line [CODE]<script type="text/javascript" src="koodit.js">[/CODE] Then I tried and tried your script and I didn't get it work. Then I noticed that one [B]</script>[/B]-tag was missing. Is it like that?

I already know something about css and I have an external .css file.

Have a nice weekend!

@JMRKERFeb 14.2015 — #Yes, the missing </script> went with the line you indicated above.

Since I did not see the original code, I did not want to include it at first,

but left it in because you had it there. As I said before, one error in JS

will often cause the whole program to fail.

Also in #JavaScript _↴

changing a div's style on hover Styling JavaScript output with CSS Display and edit an JavaScript array

Success!

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

Tweet This

Javascript with many big tables

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Javascript with many big tables

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴