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!

citmod · #3 (**permalink**) May 30th, 2017, 03:37 PM

Hi,

can somebody tell my why this code is not working? As far as declaring the variables i did the same as the solution in the book. However after that i did it completely different and I am not sure why it is not working. :(

Code:

<!DOCTYPE html>

<html lang="en">
<head>
    <title>Chapter 9, Exercise 1</title>
</head>
<body>
    <script>
        var table=document.createElement("table");
        var firstRow=document.createElement("tr");
        var secRow=document.createElement("tr");
        var thirdRow=document.createElement("tr");

        var firstCol=document.createElement("td");
        var secCol=document.createElement("td");
        var thirdCol=document.createElement("td");
        var fourthCol=document.createElement("td");
        var fifthCol=document.createElement("td");
        var sixthCol=document.createElement("td");
        var seventhCol=document.createElement("td");
        var eigthCol=document.createElement("td");
        var ninthCol=document.createElement("td");

        var firstText=document.createTextNode("Car");
        var secText=document.createTextNode("Top Speed");
        var thirdText=document.createTextNode("Price");
        var fourthText=document.createTextNode("Chevrolet");
        var fifthText=document.createTextNode("120mph");
        var sixthText=document.createTextNode("$10,000");
        var seventhText=document.createTextNode("Pontiac");
        var eigthText=document.createTextNode("140mph");
        var ninthText=document.createTextNode("$20,000");

        firstCol.appendChild(firstText);
        secCol.appendChild(secText);
        thirdCol.appendChild(thirdText);

        firstRow.appendChild(firstCol);
        firstRow.appendChild(secCol);
        firstRow.appendChild(thirdCol);

        fourthCol.appendChild(fourthText);
        fifthCol.appendChild(fifthText);
        sixthCol.appendChild(sixthText);

        secRow.appendChild(fourthCol);
        secRow.appendChild(fifthCol);
        secRow.appendChild(sixthCol);

        ninthCol.appendChild(ninthText);
        eightCol.appendChild(eigthText);
        seventhCol.appendChild(seventhText);

        thirdRow.appendChild(seventhCol);
        thirdRow.appendChild(eigthCol);
        thirdRow.appendChild(ninthCol);

        table.appendChild(firstRow);
        table.appendChild(secRow);
        table.appendChild(thirdRow);

        document.body.appendChild(table);
    </script>
    
</body>
</html>

I basically tried to do this the same way as in example 3 of the same chapter.
1. I appended the text nodes to the corresponding <td/> elements.
2. I append the <td/> elements to the corresponding <tr/> elements.
3. I append the <tr/> elements to the <table/> element.
4. I append the <table/> element to the <body> element.

However nothing shows up in my browser. I would highly appreciate it if someone could look at this and tell me whats wrong.

Thanks in advance and best regard,
citmod

Need to download code?

Navigation