p2p.wrox.com Forums (http://p2p.wrox.com/)
-   BOOK: Beginning JavaScript 5th Edition (http://p2p.wrox.com/book-beginning-javascript-5th-edition-793/)
-   -   Chapter 9 Exercise 1 - a better solution (http://p2p.wrox.com/book-beginning-javascript-5th-edition/98668-chapter-9-exercise-1-better-solution.html)

 roberttan February 25th, 2016 03:22 PM

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>```

 jmcpeak 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 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

 All times are GMT -4. The time now is 11:57 PM.