如何在表格中显示关联数组?

时间:2016-07-10 22:38:57

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

任何人都可以帮助我吗?我正在编写一个带有目标的“运气游戏”的脚本

  1. 用户输入他们想要的任意数字,生成一个从0到他们输入的数字的随机数,并将其显示在结果数组中。

  2. 模拟“头或尾”游戏,并在同一结果数组中显示该结果(我将使用关联数组)

  3. 运行上述两个目标共6次。

  4. 在表格中显示结果。

  5. 总计“头部”的数量和每个“尾部”的总量并显示它们。

  6. 返回6个结果中最小的数字。

  7. 我已经完成了第1项,第2项和第3项。我只需要第6项的帮助。如何在标题为“Coin Side”和“Number”的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>;
    

    如果我需要提供更多细节,请告诉我。

1 个答案:

答案 0 :(得分: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/