如何在表格中显示关联数组？答案

【问题标题】：How to display associative array in a table?如何在表格中显示关联数组？
【发布时间】：2016-11-12 19:36:08
【问题描述】：

谁能帮帮我？我正在编写一个带有目标的“幸运游戏”脚本

让用户输入他们想要的任何数字，生成一个从 0 到他们输入的数字的随机数，并将其显示在结果数组中。
模拟“正面或反面”游戏，并将结果显示在相同的结果数组中（我将使用关联数组）
运行上述两个目标共 6 次。
在表格中显示结果。
合计'Heads'和'Tails'的总数并显示它们。
返回 6 个结果中最小的数字。

我已经完成了第 1、2 和 3 项。我只需要第 6 项的帮助。如何在 2x7 表格上显示我的结果，标题为“硬币面”和“数字”以及如何求和将 6 次试验的所有“正面”和“反面”加起来，并返回生成的最小数字？

 <body>
 <div id = "luckGame"></div>

 var userInput = prompt("Enter maximum number output: ");
 printThis = document.getElementById('luckGame');

 function coinFlip() {
      return (Math.floor(Math.random() < 2) === 0) ? 'Heads' ; 'Tails';
 }

 for (var i = 0; i < 6; i++)
 {
      var result = [];

      result["randomNum"] = (Math.floor(Math.random()*userInput);

      result["coin"] = (coinFlip());

     printThis.innerHTML = result["coin"] + " " + result["randomNum"];
     //This loop will run 6 times.
     //This should print for example:  Heads  29 but I need to put all the results 
     //in a 2x7 table with labels "Coin Side" and "Number" included.  How do I do this?
 }

 //Code here needed to sum total of 'Heads' and 'Tails'
 //Code here needed to return the smallest number from the results.

 </body>

我的表格 CSS

 .results {
      border: 1px solid black;
      width: 200px;
      height: 20px;
   }

我的粗略桌子

 var resultsTable = "<table class= 'results'><tr><td>" + "Coin Side" + "</td><td>" + "Number" + "</td></tr>";
     resultsTable += "<tr><td> + result["coin"] + "</td><td> + result["randomNum"] + </td></tr>";
     ... // repeat 4 more times.
     resultsTable += "<tr><td> + result["coin"] + "</td><td> + result["randomNum"] + </td></tr></table>;

如果我需要提供更多详细信息，请告诉我。

【问题讨论】：

我正在考虑 6 个单独的结果，当循环重复自身直到循环运行 6 次（我应该有 6到那时分开结果值）。
开始表格 html...循环数据添加行...结束表格 html 并插入
如果你能告诉我如何在循环中添加行的代码会更有帮助......

标签： javascript arrays html-table associative-array coin-flipping

【解决方案1】：

首先，创建一个带有标题的表格

var table = document.createElement("table");
table.innerHTML = "<tr><th>Coin Side</th><th>Number</th></tr>";

然后在您的循环中只需在末尾添加此代码即可向表中添加一行

var row = document.createElement("tr");
var coinCell = document.createElement("td");
var numCell = document.createElement("td");
coinCell.innerHTML = result["coin"];
numCell.innerHTML = result["randomNum"];
row.appendChild(coinCell);
row.appendChild(numCell);
table.appendChild(row);

最后，将表格添加到文档中

document.body.appendChild(table);

要计算正面和反面，请将此代码添加到现有循环中

(result["coin"] === "Heads") ? heads++ : tails++

只需创建两个全局变量，然后先将它们设置为零

var heads = 0;
var tails = 0;

为了获取最小值，首先创建一个全局变量设置为最大值

var min = eval(userInput);

然后，在你的循环中，检查生成的数字是否小于当前的min

if(result["randomNum"] < min)
  min = result["randomNum"];

演示：https://codecanister.com/Project/d547eed9/5/result/

【讨论】：

谢谢，这对于在循环中向表中添加行非常有用。
如果这个答案有帮助，请确保接受它：meta.stackexchange.com/questions/5234/…
好的，但还有一件事——我已经编写了代码来合计“头”和“尾”的总和，但循环正在读取“头”和“尾”这两个词，就好像它们是单独的字符，所以每次我的循环运行时，它们不仅增加 +1，而且增加 +5：link
您的代码似乎可以工作，但 ' if (result
再试一次。我正在添加那部分