Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
BOOK: Beginning JavaScript 5th Edition
This is the forum to discuss the Wrox book Beginning JavaScript, 5th Edition by Jeremy McPeak; 978-1-118-90333-9
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning JavaScript 5th Edition section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old February 25th, 2016, 04:22 PM
Registered User
Points: 10, Level: 1
Points: 10, Level: 1 Points: 10, Level: 1 Points: 10, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Feb 2016
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Cool Chapter 9 Exercise 1 - a better solution

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>
  #2 (permalink)  
Old April 7th, 2016, 01:00 PM
jmcpeak's Avatar
Wrox Author
Points: 467, Level: 7
Points: 467, Level: 7 Points: 467, Level: 7 Points: 467, Level: 7
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Nov 2005
Location: , Texas, USA.
Posts: 87
Thanks: 0
Thanked 18 Times in 17 Posts
Default

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!
  #3 (permalink)  
Old May 30th, 2017, 03:37 PM
Registered User
Points: 3, Level: 1
Points: 3, Level: 1 Points: 3, Level: 1 Points: 3, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: May 2017
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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


Similar Threads
Thread Thread Starter Forum Replies Last Post
Solution To Chapter 9, Exercise 3 allen_rinehart BOOK: Beginning XML, 5th edition 3 September 11th, 2017 04:12 AM
Chapter 4, Exercise 2 Solution malie22001 BOOK: Beginning Visual C# 2010 0 May 19th, 2012 11:43 PM
Chapter 14 Exercise 3 and solution. UncleJeff BOOK: Beginning ASP.NET 4 : in C# and VB 2 March 14th, 2011 02:15 PM
Chapter 3 Exercise 4 Solution KurtBergman BOOK: Beginning Visual C# 2010 8 July 16th, 2010 08:13 PM
Solution to exercise 7, Chapter 2 Nick Y BOOK: Ivor Horton's Beginning Visual C++ 2005 0 May 28th, 2006 04:28 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.