javascript - 来自 table<tr> 循环的 HTML/Javascript/jQuery 数据

标签 javascript jquery html

我对编码和在这里的学校项目工作相当陌生，并且遇到了障碍。 我设计了一个 donut 店报告生成器，它应该随机生成每小时业务生产所需的 donut 数量，并根据数组中的变量生成总数。
我能够让我的代码在 console.log 中生成所需的信息，但不能在表中生成。
我知道我正在尝试唯一地标识表 () 中的列/行位置，但不知道该怎么做。
我添加了带有 :nth-of-type 的行，据我所知，这是识别列和行的方法，但该表未填充。

感谢任何可能提供的帮助、指导或建议。 

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

最佳答案

要使其工作，只需更改此行:

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

并在 $(function(){}) 中添加初始化语句，如下所示:

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

编辑:另请注意，您的代码中有很多错误:

  • 仅对标题行使用 TH，其余行应使用 TD
  • 您有两个 HTML 开始标记，还有正文内的头部开始标记...请检查一下:-)。

关于javascript - 来自 table<tr> 循环的 HTML/Javascript/jQuery 数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32160073/

上一篇：javascript - 缩小 HTML Canvas 时出现轻微模糊

下一篇：javascript - 停止两个间隔同时运行

相关文章：

javascript - Mapbox GL JS 刷新图层

javascript - 如何在node js中设置超时回调函数

javascript - Google Chrome 和 Firefox 的 jquery ajax html 问题

javascript - 从 Json 数据异步加载 Google map 标记

javascript - 服务器不渲染 ejs 文件

javascript - 生成的 HTML 表格我已经成功地间接更改了几个...除了这个特定的表格

jQuery翻译+切换，如何链接两者？

javascript - 在 DataTables 中显示 "All"页面以及响应表和其他属性

javascript - 如何取消隐藏 html 标签

html - 放大浏览器时主要内容重叠

©2024 IT工具网  联系我们