CODEWITHSUNDEEP
javascriptjqueryhtml
Chris Petrick
Chris Petrick

Reputation: 13

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

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>

Upvotes: 0

Views: 84

Answers (2)

Alfonso Presa
Alfonso Presa

Reputation: 1034

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

Upvotes: 1

Srinivasulu Rao
Srinivasulu Rao

Reputation: 309

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.

Upvotes: 0

Related Questions