0 Replies - 1743 Views - Last Post: 27 October 2014 - 07:13 PM

#1 JMRKER  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 134
  • View blog
  • Posts: 868
  • Joined: 25-October 08

Array of arrays & Array of strings to Tables using prototype funct

Posted 27 October 2014 - 07:13 PM

Looking for a way to show information in an "array of arrays" or "array of strings" to a 2D table display?
Here is one possible solution using two different prototype functions.

Here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- Data from: http://www.javascriptsource.com/miscellaneous/smarttables.html -->
<title> toTable Examples </title>

<style type="text/css">
 #tableDIV th { background-color:#ffff00; }
 #tableStrDIV { border:1px solid blue; width:25%; }
 #tableStrDIV th { border-bottom:1px solid black; }
</style>
</head>
<body>

<div id="tableDIV"></div> <p>
<div id="tableStrDIV"></div>

<script type="text/javascript">
var tblArray = [  // sample: array of arrays format
   ['','Name','Height','Weight','Lovability','Noise'],
   ['Cow','Daisy','180 cm','500 kg','15%','Moo'],
   ['Sheep','Fluffy','120 cm','40 kg','10%','Baa'],
   ['Pig','Oinky','100 cm','35 kg','40%','Oink'],
   ['Dog','Barky','056 cm','5 kg','90%','Woof'],
   ['Cat','Mewy','040 cm','3 kg','65%','Meow'],
   ['Chicken','Pecky','030 cm','2 kg','5%','Cluck'],
   ['Horse','Flicka','200 cm','400 kg','50%','Nay'],
];
var tblStrArray = [  // sample: array of strings format
   'Animal,Name,Lovability,Noise',
   'Cow,Daisy,15%,Moo',
   'Sheep,Fluffy,10%,Baa',
   'Pig,Oinky,40%,Oink',
   'Dog,Barky,90%,Woof',
   'Cat,Kitty,65%,Meow',
   'Chicken,Pecky,5%,Cluck',
   'Horse,Flicka,50%,Nay',
];
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>';
  return str;
}
Array.prototype.toStrTable = function(bdr, wide) {
  var tarr = [];
  for (var r=0; r<this.length; r++) { tarr.push(this[r].split(',')); }
  return tarr.toTable(bdr,wide);
}

window.onload = function() {
  document.getElementById('tableDIV').innerHTML = tblArray.toTable('1',"50%");
  document.getElementById('tableStrDIV').innerHTML = tblStrArray.toStrTable('0',"100%");
}
</script>

</body>
</html>



Here is the array of arrays format defined:
The first row contains the heading information for each column of the table
The remaining rows contain the data for each cell of the table.

	var tblArray = [  // sample: array of arrays format
	   ['','Name','Height','Weight','Lovability','Noise'],
	   ['Cow','Daisy','180 cm','500 kg','15%','Moo'],
	   ['Sheep','Fluffy','120 cm','40 kg','10%','Baa'],
	   ['Pig','Oinky','100 cm','35 kg','40%','Oink'],
	   ['Dog','Barky','056 cm','5 kg','90%','Woof'],
	   ['Cat','Mewy','040 cm','3 kg','65%','Meow'],
	   ['Chicken','Pecky','030 cm','2 kg','5%','Cluck'],
	   ['Horse','Flicka','200 cm','400 kg','50%','Nay'],
	];



Here is the array of strings format defined:
The first row again contains the heading information for each column of the table as a string with cells separated by the , character.
The remaining rows contain the string for each row of the table with the cells also separated by the , character.
Other character separators could be used in the string with a slight modification to the code,
but this entry format more closely approximates the CSV format of most spreadsheets.

	var tblStrArray = [  // sample: array of strings format
	   'Animal,Name,Lovability,Noise',
	   'Cow,Daisy,15%,Moo',
	   'Sheep,Fluffy,10%,Baa',
	   'Pig,Oinky,40%,Oink',
	   'Dog,Barky,90%,Woof',
	   'Cat,Kitty,65%,Meow',
	   'Chicken,Pecky,5%,Cluck',
	   'Horse,Flicka,50%,Nay',
	];



The position and size of the table displays are determined by the use of <div> tags within the <body> section
You can change the appearance of the displays using modifications to the CSS commands.

Is This A Good Question/Topic? 0
  • +

Page 1 of 1