javascript - 我怎样才能让我所有的值都显示在我的 table 上？

Question

所以我尝试将“e.push(addScore(e[0]))”中的零值更改为 1，基本上它只显示表中的前四个变量。但是，当它为零时，它会将所有成绩显示为不及格，但会在表中列出所有变量。我希望能够列出每个学生的所有变量和正确的年级。

var score = [
['Mary', 65],
['Jim', 70],
['Albert', 85],
['Carroll', 90],
['Francis', 50],
['Micheal', 62],
['John', 76],
['Tim', 88],
['Carlos', 64],
['Steven', 45]
],
 table = document.getElementById("table");

 function addScore(score) {
  let grade = '1'
  if (score >= 80) {
    grade = 'High Distinction';
  } else if (score >= 70 && score < 80) {
    grade = 'Distinction';
  } else if (score >= 60 && score < 70) {
    grade = 'Credit';
  } else if (score >= 50 && marks < 60) {
    grade = 'Pass';
  } else {
    grade = 'Fail';
  }
   return grade
  }

//遍历数组 score.forEach((e, i) => { var newRow = table.insertRow(table.length);

// adding score to each row
 e.push(addScore(e[0]))
 e.forEach((el, j) => {
 var cell = newRow.insertCell(j)
 cell.innerHTML = el
})
})


//this is for my inner html
<table id="table">
 <tr>
  <th>Name</th>
  <th>Score</th>
  <th>Grade</th>
  </tr>
</table>

Answer 1

你快到了。分数是数组中的第二个元素，因此您应该使用索引 1 而不是索引 0。

e.push(addScore(e[1]));

此外，您的代码中有一个拼写错误。

else if (score >= 50 && marks < 60) {
    grade = 'Pass';

将上述语句中的marks替换为score。

这就是只显示四个条目而不是全部的原因。数组中的第五个值(得分 50)满足此条件并引发 undefined 错误。

实例:

var score = [
    ['Mary', 65],
    ['Jim', 70],
    ['Albert', 85],
    ['Carroll', 90],
    ['Francis', 50],
    ['Micheal', 62],
    ['John', 76],
    ['Tim', 88],
    ['Carlos', 64],
    ['Steven', 45]
  ],
  table = document.getElementById("table");

function addScore(score) {
  
  if (score >= 80) {
    grade = 'High Distinction';
  } else if (score >= 70 && score < 80) {
    grade = 'Distinction';
  } else if (score >= 60 && score < 70) {
    grade = 'Credit';
  } else if (score >= 50 && score < 60) {
    grade = 'Pass';
  } else {
    grade = 'Fail';
  }
  return grade;
}

score.forEach((e, i) => {
  var newRow = table.insertRow(table.length);

  // adding score to each row
  e.push(addScore(e[1]));
  
  e.forEach((el, j) => {
    var cell = newRow.insertCell(j);
    cell.innerHTML = el;
  })
})

<table id="table">
  <tr>
    <th>Name</th>
    <th>Score</th>
    <th>Grade</th>
  </tr>
</table>