Web Exercise #1

Transpose a table using Dojo.

by parente

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4.0/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4.0/dijit/themes/tundra/tundra.css">
<script type="text/javascript">
    dojo.require('dijit.layout.BorderContainer');
    dojo.require('dijit.layout.ContentPane');
</script>
<div dojoType="dijit.layout.BorderContainer" liveSplitters="true">
    <div dojoType="dijit.layout.ContentPane" region="center">
        <h1>Exercise #1 - Transpose a table</h1>
        <p>This is an exercise to challenge your JavaScript, DOM, and documentation-reading skills. Feel free to use any resources on the Web to complete the exercise, but you're on your honor not to ask others to solve it for you.</p>
        
        <p>Here is a table with <em>id="theTable"</em> in the DOM.</p>
        
        <table border="1" id="originalTable">
            <tbody>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
                <tr><td>4</td><td>5</td><td>6</td><td>7</td></tr>
            </tbody>
        </table>
        
        <p>Your goal is to write some JavaScript that does the following:</p>
        <ol>
            <li>Extracts the numbers from the table into a 2D array</li>
            <li>Creates a new table with <em>id="newTable"</em> that is the transpose of the original</li>
        </ol>
        <p>All of your code should be contained in a global function named <em>transpose()</em> that returns the 2D array when called.</p>
        
        <h2>Hints</h2>
        <ol>
            <li>Your code must work with any size table containing numbers.</li>
            <li>After entering your code, click the <em>Run</em> button to update the result pane.</li>
            <li>You only need to edit JavaScript pane in the bottom left to complete this exercise. You can, of course, view the HTML, CSS, and Result.</li>
            <li>Dojo 1.4 is already included for you on the page. <a...

CSS

body, html, .dijitBorderContainer { width:100%; height:100%; margin:0; padding:0 }
h1 { margin-top: 0px;}
td { padding: 5px; }
ol { list-style-type: decimal !important; padding-left: 20px !important;}
li { margin: 5px !important;}
em {font-style: italic !important; }
#bottom { height: 200px; }

JavaScript

/* Write your code in here. */