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 [email protected]</footer>

</body>

</html>

that's a lot of code to trawl through. You should be putting this.donutsPerHour and this.donutsPerDay on the prototype. Can you simplify the question and pin-point the exact problem with comments? — Data
– Data, Commented Aug 22, 2015 at 19:45
console.log(this.column); - and you will see problem. It is undefined and you send it as argument to nth-of-type, but you actually need number. — sinisake
– sinisake, Commented Aug 22, 2015 at 19:54
I apologize for excessive code snippetry. I probably could have left off the .css...but I was;t sure where the problem was. Or wasn't. — Chris Petrick
– Chris Petrick, Commented Aug 22, 2015 at 19:56

Alfonso Presa · Accepted Answer · 2015-08-22 19:55:55Z

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 :-).

answered Aug 22, 2015 at 19:55

Alfonso Presa

1,0347 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chris Petrick Over a year ago

Thanks. I think the two opening tags happened when pasting in there.

Alfonso Presa Over a year ago

That has sense :). Did my changes to your code make it work?

Alfonso Presa Over a year ago

Only copy the provided code in the same place they are now replacing them

Srinivasulu Rao · Accepted Answer · 2015-08-22 19:55:17Z

0

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.

answered Aug 22, 2015 at 19:55

Srinivasulu Rao

3091 gold badge3 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related