Question

我从我遵循的教程中创建了一个反应测试器游戏，但我想将其添加为练习，只是我不知道如何用用户的前10个结果填充表格。我将结果存储在数组中。这个想法是用户将玩游戏直到他们想要获得10个最佳分数，他们将按下按钮，并且表格中将显示来自数组的结果。表格的最大大小为10，但大小可以从0到10，如果用户只玩5次，则表格只会创建5行，等等。

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

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

    }
}

}

我在下面附加了一个代码链接，非常感谢。

Live reaction tester link

Answer 1

您需要解决的事情。

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

<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之类的验证器中，因为根据我的快速扫描，我认为您的Codepen中可能会出现另一个或两个错误（不会检查）。 / p>

用数组值填充表

1 个答案: