Chapter 9 Exercise 1

roberttan · #1 (**permalink**) February 25th, 2016, 03:22 PM

This is a much DRY-er solution than the proposed answer which is monstrous.

Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Ch. 9 Exercise 1</title>
    <style>
        
        
    </style>

</head>
<body>
    


    <script>
        
        var array = [['Car', 'Top Speed', 'Price'],['Chevrolet', '120mph', '$10,000'], ['Pontiac', '140pmh', '$20,000']] // Creating a 2x2 data array which a loop will source from
        
        var table = document.createElement('table');
        document.body.appendChild(table); // Drew the main table node on the document
        
        for (var i = 0; i<3; i++) { 
            var tr = document.createElement('tr'); //Create 3 <tr> elements
            table.appendChild(tr); // Append to <table> node
            
            for (var j = 0; j<3; j++) {
                var tdElement = document.createElement('td');
                tdElement.innerHTML = array[i][j]; // Extract data from array to a placeholder variable
                tr.appendChild(tdElement); // Take string from placeholder variable and append it to <tr> node
            }
        }
        
        
        
        
        
    </script> 
    
</body>
    
</html>

jmcpeak · #2 (**permalink**) April 7th, 2016, 01:00 PM

Thanks for your contribution, roberttan. Your approach is a much more concise solution.

However, consider these things:

- it's a beginning book. The vast majority of people reading this book have never programmed before, much less used a multi-dimension array. So while your approach is much more ideal in a real world example, it's a bit too advanced for the target audience.

- the goal of the exercises is much like homework: to drill the ideas and concepts into the student's head through repetition. Chapter 9 introduces the DOM API. The best way to get familiar with any API is through repetition.

Thanks again!

Need to download code?

Navigation