文章/答案/技术大牛

发布

社区首页 >问答首页 >table<tr>循环中的HTML/Javascript/jQuery数据

问table<tr>循环中的HTML/Javascript/jQuery数据
EN

Stack Overflow用户

提问于 2015-08-22 19:39:40

回答 2查看 73关注 0票数 0

我对这里的一个学校项目的编码和工作还很陌生，而且遇到了一个障碍。我设计了一个甜甜圈店报告生成器，它应该随机生成每小时生产所需的甜甜圈#，并根据我的数组中的变量进行总计。

我能够让我的代码在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>

javascript

jquery

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-08-22 19:55:55

要使它工作，只需更改这一行：

$("#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开头标签，还有身体内的头部开始标记.请回顾:-)。

票数 1

Stack Overflow用户

发布于 2015-08-22 19:55:17

您的问题非常简单，要标识表中的每个框，您可以分配一个不同的唯一id来执行，例如，如下所示

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

现在您必须使用唯一的id来将结果插入其中，例如，您想在第一列的第二行中添加3个甜甜圈，然后您可以这样做。

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

同样，您可以在每个框的javascript中以编程方式完成此操作。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32160073

复制

相似问题

问table<tr>循环中的HTML/Javascript/jQuery数据
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问table<tr>循环中的HTML/Javascript/jQuery数据EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问table<tr>循环中的HTML/Javascript/jQuery数据
EN