dcsimg
www.webdeveloper.com
Results 1 to 10 of 10

Thread: Javascript with many big tables

  1. #1
    Join Date
    Feb 2015
    Posts
    8

    Javascript with many big tables

    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?

    HTML Code:
    <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>

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,159
    First I'll just note that it would be a good habit to start putting your <script> tags at the end of your HTML code (just before the closing </body> 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:
    HTML Code:
    <!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>
    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 game variable with new data.

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,505
    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.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> toTable Examples </title>
    
    <style type="text/css">
     #tableDIV th { background-color:#ffff00; }
    </style>
    </head>
    <body>
    
    <div id="tableDIV"></div> <p>
    
    <script type="text/javascript">
    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 = [  
       ['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 = [  
       ['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 = [  
       ['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 = '<table border="'+bdr+'" width="'+wide+'">';
      var trec = this.shift();
          str += '<thead><tr><th>'+trec.join('</th><th>')+'</th></tr></thead><tbody>';
      for (var r=0; r<this.length; r++) {
          str += '<tr><td>'+this[r].join('</td><td>')+'</td></tr>';
      }   str += '</tbody></table><p>';
      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%");
    }
    </script>
    
    </body>
    </html>
    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.

  4. #4
    Join Date
    Feb 2015
    Posts
    8
    Thanks guys! You have helped me a lot. JMRKER, I like your script very much but I have thought what Sup3rkirby 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) {

    So, else if (x == 2) works very well, because I have put the code inline. But else if (x == 1) 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>";
    }
    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.

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,505
    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.

  6. #6
    Join Date
    Feb 2015
    Posts
    8
    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.
    HTML Code:
    <!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>
    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.

  7. #7
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,159
    Okay, so the problem with your first if() statement (if (x == 1)) is that you are trying to set the innerHTML (which is a string/text value) equal to round_1. However, round_1 is a function (not a string).

    Now, to be completely fair, you *could* still set the innerHTML value to a function, but then the function must have a 'return' value. Otherwise the function won't send any data to the innerHTML 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;
    }
    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 if() statement to this:
    Code:
    document.getElementById("round").innerHTML = round_1();
    With those two changes, when the first if() statement is true, it will call the round_1() function and this function will now return a value to be placed in the innerHTML on your page.

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,505

    Lightbulb

    OK, I'll try once more.

    Some assumptions made 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, 'koodit.js', contains valid and working code.
    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 'season.html':
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> season.html </title>
    
    <style type="text/css">
     #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%; }
    
    </style>
    
    </head>
    <body>
    <h2>Ottelukierros</h2>
    <select id="mySelect" onchange="myFunction(this.value)">
      <option value="">Select</option>
      <option value="0">1
      <option value="1">2
      <option value="2">3
      <option value="3">4
      <option value="4">5
      <option value="5">6
    </select>
    
    <div id="tableDIV"></div> <p>
    
    <script type="text/javascript" src="koodit.js">  <!-- unknown contents.  remove line if not needed -->
    
    <script type="text/javascript" src="rounds.js"> <!-- season dates, times, teams and totals -->
    
    <script type="text/javascript">
    Array.prototype.toTable = function() {
      var arr = this.slice(0);
      var str = '<table border="3" width="380px" align="center">';  // change border and width of table here
      var trec = arr.shift();  // get first row of array
          str += '<thead><tr>';
          str += '<th class="thDate">'+trec[0]+'</th>';  // Date
          str += '<th class="thTime">'+trec[1]+'</th>';  // Time
          str += '<th class="thGame">'+trec[2]+'</th>';  // Game
          str += '<th class="thTulos">'+trec[3]+'</th>'; // Tulos
          str += '</tr></thead>';
          str += '<tbody>';
      for (var r=0; r<arr.length; r++) { // display contents of rest of array
          str += '<tr><td>'+arr[r].join('</td><td>')+'</td></tr>';
      }   str += '</tbody>'
          str += '</table><p>';
      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
    </script>
    
    </body>
    </html>
    External JS file contents, called 'rounds.js' here:
    Code:
    // 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 = [  
       ['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 = [  
       ['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 = [  
       ['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.

  9. #9
    Join Date
    Feb 2015
    Posts
    8
    Thank you very much. You have helped me a lot. Now both of those scripts are functioning. JMRKER, I took off the line
    Code:
    <script type="text/javascript" src="koodit.js">
    Then I tried and tried your script and I didn't get it work. Then I noticed that one </script>-tag was missing. Is it like that?
    I already know something about css and I have an external .css file.
    Have a nice weekend!

  10. #10
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,505
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles