www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] 2D array and html table

Hybrid View

  1. #1
    Join Date
    Oct 2009
    Posts
    8

    resolved [RESOLVED] 2D array and html table

    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
    Last edited by Low Society; 11-17-2011 at 07:18 PM.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356

    Lightbulb

    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.

  3. #3
    Join Date
    Oct 2009
    Posts
    8
    Quote Originally Posted by JMRKER View Post
    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.

    Quote Originally Posted by JMRKER View Post
    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

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356
    You're most welcome.
    Happy to help.
    Good Luck!

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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