时间戳

首页 > 解决方案 > 使用数组值填充表

javascript - 使用数组值填充表

问题描述

我根据我正在关注的教程创建了一个反应测试游戏，但我想将其添加为练习，但我无法弄清楚如何用用户的前 10 个结果填充表格。我将结果存储在一个数组中。这个想法是用户将玩游戏，直到他们想要获得 10 个最好的分数，他们将按下按钮，表格将填充数组中的结果。表的最大大小为 10，但它的大小可以从 0 到 10，如果用户只玩 5 次，则表只会创建 5 行等。

该表将有 2 列，第 1 列用于订购第 1-10 列。第二是最好的时光。

<table id="resultsTable" border="1">
    <tr>
       <th>Position</th>
       <th>Best time</th>
    </tr>
</table>

我创建了数组来存储无序值。

var newArray = new Array();

单击形状后，我将结果推送到数组的末尾，我还添加了一个计数以跟踪有多少。

var count = 0;

// When the shape is clicked

document.getElementById("shape").onclick = function() {

    document.getElementById("shape").style.display = "none";

    //increments when user clicks the shapes
    count++;

    var end = new Date().getTime();
    var timeTaken = (end -start)/1000;
    document.getElementById("timeTaken").innerHTML = timeTaken + "s";
    document.getElementById("clickNumber").innerHTML = count;

    appearAfterDelay();

    newArray.push(count, timeTaken);
}

按下按钮后，我创建一个 newArray 的克隆并对其进行排序，我想将无序数组分开。

var clone = newArray.slice(0);

//sorts the best times
clone.sort();

我正在尝试实现这个嵌套的 for 循环以将值显示到表中，但这是我卡住的地方。

var increment = 1; //Global variable


//once i is less than the count it keeps going. Because its sorted first best 10 will be at front, don't need to go any further.
for(var i = 0; i < count; i++){
    var newRow = table.insertRow(count);
    for(var j = 0; j < count; j++){
        if (increment <= 10) {
            var cell = newRow.insertCell(j);
            cell.innerHTML = clone[i][j];
            increment ++;
        }else{
            break;
        }

    }
}

}

我在下面附上了一个正在运行的代码的链接，任何帮助让它工作将非常感谢。

现场反应测试仪链接

标签： javascripthtmlarrays

解决方案

为了解决这个问题，您需要做几件事。

首先，您尚未定义用于在结果表中插入行的变量。如果你像这样设置你的tablehtml：

<table id="resultsTable" border="1">
  <thead>
    <tr>
      <th>Position</th>
      <th>Best time</th>
    </tr>
  </thead>
  <tbody id="results">
  </tbody>
</table>

然后您可以tbody像这样选择部分（要在表格标题下方显示结果的位置）：

var results = document.getElementById('results');

然后，有多种方法可以显示您正在寻找的结果，但这里有一种通常与您尝试执行的操作一致。您误解了如何insertRow工作insertCell，下面的代码示例只是使用-1索引在末尾插入行和单元格。此外，您的clone数组不是数组数组，因此您无法使用您正在使用的语法访问值，并且嵌套循环确实没有理由。消除了对increment变量的使用，因为您可以在显示 10 个结果后使用迭代器来中断循环。还添加了results.innerHTML = ''在循环之前清除结果，然后在后续点击中显示新的（可能不同的）前 10 次（有更好的方法来删除 html，但希望下面的代码示例专注于大多数问题所在的循环）。

results.innerHTML = '';
for(var i = 0; i < count; i++){
  var newRow = results.insertRow(-1);
  var cell1 = newRow.insertCell(-1);
  var cell2 = newRow.insertCell(-1);
  cell1.innerHTML = i + 1;
  cell2.innerHTML = clone[i];
  if (i === 9) {
    break;
  } 
}

通过上述更改，您不需要包含您的count值，newArray因为它会使您的结果因错误数据而变得混乱。所以newArray.push(count, timeTaken)改为newArray.push(timeTaken).

此外，js sort 函数默认将数组值作为字符串进行比较。要比较数值，您需要将函数传递给sort，例如clone.sort(function(a,b) {return a - b;})按升序对值进行排序。

最后，它可能会帮助您将 js 粘贴到像jshint这样的验证器中，因为根据我的快速扫描，我认为您的代码笔中可能还有一两个错误（检查不会有坏处）。

推荐阅读