HTML/Javascript/jQuery data from loop for table<tr>

Question

I'm fairly new to coding and working on a school project here, and am hitting a road block. I am designed a donut shop report generator that should randomly generate # of donuts needed for production per hour of business, and total based on the variables in my array.
I am able to get my code to generate the needed info in the console.log, but not in the table.
I know that I am trying to uniquely identify column/row positions in the table () but do not know how to do that.
I added the line with the :nth-of-type, as I understand that is the way to identify column and row, but the table is not populated.

Appreciate any help, coaching or advice that might be out there.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title>Chris Petrick's Donut Shop Chain | Donuts for People Who Hate Donuts</title> </head> <body> <script type="text/javascript"> console.log ("start"); function Shop(name, minCustHour, maxCustHour, avgDonPerCust, totalHour, displayColumn ) { this.name = name; this.minCustHour = minCustHour; this.maxCustHour = maxCustHour; this.avgDonPerCust = avgDonPerCust; this.totalHour = totalHour; this.totalDonuts = 0; this.hourlyDonuts = []; this.displayColumn = displayColumn; this.donutsPerHour = function(){ var range = this.maxCustHour - this.minCustHour; var avgDonPerHour = Math.floor ((Math.random() * range) + this.minCustHour); return avgDonPerHour; } // =========HOURS FOR LOOP============= this.donutsPerDay = function(){ console.log("Donut Production for " + this.name); for (var hour = 0; hour < this.totalHour; hour++) { var donutsforHour = this.donutsPerHour(); this.totalDonuts += donutsforHour; this.hourlyDonuts.push(donutsforHour); ===== ==== ======:nth-of-type================= $("hour-"+hour+" th:nth-of-type("+this.column+")").html(donutsforHour); console.log(" Donuts for hour " + hour + " are " + donutsforHour); } console.log("Total Donuts per day for " + this.name + " is " + this.totalDonuts + "\\n"); } } var downtownShop = new Shop("Downtown", 8, 43, 4.5, 8, 1); var capitolhillShop = new Shop("Capitol Hill", 4, 37, 2, 24, 2); var southlakeunionShop = new Shop("South Lake Union", 9, 23, 6.33, 10, 3); var wedgewoodShop = new Shop("Wedgewood", 2, 28, 1.25, 7, 4); var ballardShop = new Shop("Ballard", 8, 58, 3.75, 10, 5); downtownShop.donutsPerDay(); capitolhillShop.donutsPerDay(); southlakeunionShop.donutsPerDay(); wedgewoodShop.donutsPerDay(); ballardShop.donutsPerDay(); </script> <html> <head> <title> Donut Hater</title> <link rel="stylesheet" type="text/css" href="DonutShop2.css"> </head> <link href='http://fonts.googleapis.com/css?family=Monoton' rel='stylesheet' type='text/css'> <h1>Donut Hater</h1> <link href='http://fonts.googleapis.com/css?family=Cherry+Cream+Soda' rel='stylesheet' type='text/css'> <h3>Five Locations To Serve You</h3> <h3 class = "locations">DOWNTOWN <b class = "stars">&#9733</b> CAPITOL HILL <b>&#9733</b> SOUTH LAKE UNION <b>&#9733</b> WEDGEWOOD <b>&#9733</b> BALLARD</h3> <div id="table"> <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'> <table id="output"> <table align="center"> <thead> <tr class="header"> <th scope="col">Hour</th> <th scope="col">Downtown</th> <th scope="col">Capitol Hill</th> <th scope="col">South Lake Union</th> <th scope="col">Wedgewood</th> <th scope="col">Ballard</th> </tr> <tr id="hour-0"> <th scope="row">12:00am</th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr id="hour-1"> <th scope="row">1:00am</th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr id="hour-2"> <th scope="row">2:00am</th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr id="hour-3"> <th scope="row">3:00am</th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr id="hour-4"> <th scope="row">4:00am</th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr id="hour-5"> <th scope="row">5:00am</th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr id="hour-6"> <th scope="row">6:00am</th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr id="hour-7"> <th scope="row">7:00am</th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr id="hour-8"> <th scope="row">8:00am</th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr id="hour-9"> <th scope="row">9:00am</th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr id="hour-10"> <th scope="row">10:00am</th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr id="hour-11"> <th scope="row">11:00am</th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr id="hour-12"> <th scope="row">12:00pm</th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr id="hour-13"> <th scope="row">1:00pm</th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr id="hour-14"> <th scope="row">2:00pm</th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr id="hour-15"> <th scope="row">3:00pm</th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr id="hour-16"> <th scope="row">4:00pm</th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr id="hour-17"> <th scope="row">5:00pm</th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr id="hour-18"> <th scope="row">6:00pm</th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr id="hour-19"> <th scope="row">7:00pm</th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr id="hour-20"> <th scope="row">8:00pm</th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr id="hour-21"> <th scope="row">9:00pm</th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr id="hour-22"> <th scope="row">10:00pm</th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr id="hour-23"> <th scope="row">11:00pm</th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr class = "dailyTotal"> <th scope="row">Daily Total</th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> </table> </table> </div> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="DonutShop.js"></script> <footer>&copy Donut Hater Donuts &#9733 971.555.9876 &#9733 info@donuthater.com</footer> </body> </html>

Answer 1

To make it work just change this line:

$("#hour-"+hour+" th:nth-child("+(this.displayColumn+1)+")").html(donutsforHour);

And add the initialization statements inside an $(function(){}) like this:

$(function () {
    downtownShop.donutsPerDay();
    capitolhillShop.donutsPerDay();
    southlakeunionShop.donutsPerDay();
    wedgewoodShop.donutsPerDay();
    ballardShop.donutsPerDay();
});

Edit : Also note there are many things that are wrong in your code:

Use TH only for header rows, you should be using TD for the rest of them
You have two HTML opening tags and, also head opening tag inside the body... review that please :-).

Answer 2

Your problem is quite simple, to identify each box in the table you can assign a different unique id to do it, for example like this

   <table>
   <tr><td id='xyz_11'></td><td id='xyz_12'></td><td id='xyz_13'></td></tr>
  <tr><td id='xyz_21'></td><td id='xyz_22'></td><td id='xyz_23'></td></tr>
   </table>

Now you have to use unique id to insert the result into it, for example you want to add 3 donuts in the 2nd row of the first column, then you can do like this.

 <script>
 document.getElementById('xyz_21').innerHTML=3;
 </script>

and likewise you can do this programmatically in javascript for each and every box.

HTML/Javascript/jQuery data from loop for table<tr>

Question

2 answers

solution1
1 ACCPTED 2015-08-22 19:55:55

solution2
0 2015-08-22 19:55:17

HTML/Javascript/jQuery data from loop for table<tr>

Question

2 answers

solution1 1 ACCPTED 2015-08-22 19:55:55

solution2 0 2015-08-22 19:55:17

solution1
1 ACCPTED 2015-08-22 19:55:55

solution2
0 2015-08-22 19:55:17