[英]HTML/Javascript/jQuery data from loop for table<tr>
我对这里的学校项目进行编码和工作相当陌生，并且遇到了障碍。 我设计了一个甜甜圈店报表生成器，该生成器应随机生成每小时营业所需生产的甜甜圈数，并根据数组中的变量总计。
我可以在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">★</b> CAPITOL HILL <b>★</b> SOUTH LAKE UNION <b>★</b> WEDGEWOOD <b>★</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>© Donut Hater Donuts ★ 971.555.9876 ★ 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();
});
编辑 ：还请注意，您的代码中有很多错误的地方：
您的问题很简单，要识别表中的每个框，您可以分配一个不同的唯一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以编程方式对每个框进行此操作。
将html字符串附加为表格行（ <tr> ）通过javascript-jquery
[英]Append html string as a table row (<tr>) via javascript-jquery
如何将 jquery stringyfy 数据附加到具有 4 个用户的可编辑（tr 和 td）数据的表中，例如循环
[英]How to append jquery stringyfy data to table with editable (tr and td) data of 4 users one by one like loop
使用Razor / C＃遍历HTML表以获取每个表中的数据<tr>
[英]Loop through an HTML table using Razor/C# to get the data in each <tr>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.