[RESOLVED] 2D array and html table

**Low Society** · 11-17-2011 07:03 PM

Hi,

I have converted a recordset into a string of text where each field is separated by a ',' and each record separated by a '|'

The format of the data string is similar to:
name, date, duty| Jim, Mon, Office | Jim, Tue, Office | Jim, Wed, Holiday | Jim, Thu, Meeting | Jim, Fri, Meeting | Sue, Mon, Office | Sue, Tue, Meeting | Sue, Wed, Holiday | Sue, Thu, Holiday | Sue, Fri, Holiday | etc.

The array is therefore something like:
Array[0][0] name
Array[0][1] date
Array[0][2] duty
Array[1][0] Jim
Array[1][1] Mon
Array[1][2] Office
Array[2][0] Jim
Array[2][1] Tue
Array[2][2] Office
etc.

etc.

My question is...
How can I rearrange this data in a HTML table so it looks something like the example below?

name, Mon, Tue, Wed, Thu, Fri
Jim, Office, Office, Holiday, Meeting, Meeting
Sue, Office, Meeting, Holiday, Holiday, Holiday
etc.

I have very little knowledge of Javascript, so if anyone is able and willing to help, could you please explain your answer as thoroughly as possible or at least point me in the right direction to research my answer from other resources.

Many thanks,
Gary

**JMRKER** · 11-17-2011 08:21 PM

Not necessarily the best way to do this, but it does appear to meet your requirements.
(This better not be homework!)

Code:

<!DOC HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?t=253577

var StringRecs = 'Name, Day, Duty|'
   + 'Jim, Mon, Office|'
   + 'Jim, Tue, Office|'
   + 'Jim, Wed, Holiday|'
   + 'Jim, Thu, Meeting|'
   + 'Jim, Fri, Meeting|'

   + 'Sue, Mon, Office|'
   + 'Sue, Tue, Meeting|'
   + 'Sue, Wed, Holiday|'
   + 'Sue, Thu, Holiday|'
   + 'Sue, Fri, Holiday|';

var Recs = StringRecs.split('|');

function CreateTable() {
  var tarr = [];
  var str = '';
  str += '<table border="1">';
  tarr = Recs[0].split(',');
  str += '<tr bgcolor="#ffff00"><th>'+tarr[0]+'</th><th>'
      + ['Mon','Tue','Wed','Thu','Fri'].join('</th><th>')+'</th></tr>';
  for (var i=1; i<Recs.length-1; i=i+5) {
    str += '<tr>';
    tarr = Recs[i].split(',');
    str += '<td>'+tarr[0]+'</td>';  str += '<td>'+tarr[2]+'</td>';
    tarr = Recs[i+1].split(',');    str += '<td>'+tarr[2]+'</td>';
    tarr = Recs[i+2].split(',');    str += '<td>'+tarr[2]+'</td>';
    tarr = Recs[i+3].split(',');    str += '<td>'+tarr[2]+'</td>';
    tarr = Recs[i+4].split(',');    str += '<td>'+tarr[2]+'</td>';
    str += '</tr>';
  }
  str += '</table>';
  document.getElementById('StrRecTable').innerHTML = str;
}
</script>

</head>
<body>
<button onclick="CreateTable()">Create Table</button>
<p />
<div id="StrRecTable"></div>
</body>
</html>

I used the most common commands I could think of so you would have less research to do to understand the function of each of them.

**Low Society** · 11-18-2011 07:24 AM

Originally Posted by JMRKER

Not necessarily the best way to do this, but it does appear to meet your requirements.
(This better not be homework!)

It most certainly isn't homework!!! I need this to manipulate data from an Oracle database to be redisplayed in the correct format in an intranet portal.

Originally Posted by JMRKER

I used the most common commands I could think of so you would have less research to do to understand the function of each of them.

I really appreciate your help. Although the code provided will still need to be adjusted to meet the exact requirements, it goes a very long well in solving the problem. I can now research the commands used to get a better understanding of how it works, though I have a fairly good impression so far of how the code is working.

Thank you for taking the time to respond. You have saved many hours of frustration.

All the best,
Gary

**JMRKER** · 11-18-2011 07:32 AM

You're most welcome.
Happy to help.
Good Luck!

Thread: [RESOLVED] 2D array and html table

Thread Tools

Display

[RESOLVED] 2D array and html table

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions