使用js的html表格

我正在嘗試用 javascript 填充一個 html 正文表，但它沒有呈現，任何人都可以告訴我為什么？

var shepard = {
  name: "Commander",
  victories: 3,
  ties: 1,
  defeats: 6,
  points: 0
};
var lara = {
  name: "RaiderOfTombs",
  victories: 2,
  ties: 1,
  defeats: 7,
  points: 0
};
var altair = {
  name: "HiddenOne",
  victories: 4,
  ties: 1,
  defeats: 5,
  points: 0
};

function calculatePoints(player) {
  var points = player.victories * 3   player.ties;
  return points;
}

shepard.points = calculatePoints(shepard);
lara.points = calculatePoints(lara);
altair.points = calculatePoints(altair);

var players = [shepard, lara, altair];

function showPlayersOnScreen(players) {
  var element = "";
  for (var i = 0; i < players.lenght; i  ) {
    element  = "<tr><td>"   players[i].name   "</td>";
    element  = "<td>"   players[i].victories   "</td>";
    element  = "<td>"   players[i].ties   "</td>";
    element  = "<td>"   players[i].defeats   "</td>";
    element  = "<td>"   players[i].points   "</td>";
    element  = "<td><button class='w' onClick='addVictory("   i   ")'>Victory</button></td>";
    element  = "<td><button class='t' onClick='addTie("   i   ")'>Tie</button></td>";
    element  = "<td><button class='d' onClick='addDefeat("   i   ")'>Defeat</button></td>";
    element  = "</tr>";
  }

  var playerTable = document.querySelector("tbody");
  playerTable.innerHTML = element;
}

showPlayersOnScreen(players);

function addVictory(i) {
  var player = players[i];
  player.victories  ;
  player.points = calculatePoints(player);
  showPlayersOnScreen(players);
}

function addTie(i) {
  var player = players[i];
  player.ties  ;
  player.points = calculatePoints(player);
  showPlayersOnScreen(players);
}

function addDefeat(i) {
  var player = players[i];
  player.defeats  ;
  showPlayersOnScreen(players);
}

<table>
  <thead>
    <tr>
      <th>Player</th>
      <th>Victories</th>
      <th>Ties</th>
      <th>Defeats</th>
      <th>Points</th>
      <th colspan="3">Actions</th>
    </tr>
  </thead>
  <tbody id="playerT">
</table>

我嘗試將選擇器更改為 id 并使用 getElementById，使用 createElement 在腳本上創建 tbody，還嘗試在那里創建整個內容，寫入并重寫所有代碼，我很絕望。

uj5u.com熱心網友回復：

您的回圈宣告中有錯字，它不for應該是. 后者將是，因此回圈不會執行。players.lengthplayers.lenghtundefined

這是更正后的版本：

var shepard = {
  name: "Commander",
  victories: 3,
  ties: 1,
  defeats: 6,
  points: 0
};
var lara = {
  name: "RaiderOfTombs",
  victories: 2,
  ties: 1,
  defeats: 7,
  points: 0
};
var altair = {
  name: "HiddenOne",
  victories: 4,
  ties: 1,
  defeats: 5,
  points: 0
};

function calculatePoints(player) {
  var points = player.victories * 3   player.ties;
  return points;
}

shepard.points = calculatePoints(shepard);
lara.points = calculatePoints(lara);
altair.points = calculatePoints(altair);

var players = [shepard, lara, altair];

function showPlayersOnScreen(players) {
  var element = "";
  // "length" not "lenght"
  for (var i = 0; i < players.length; i  ) {
    element  = "<tr><td>"   players[i].name   "</td>";
    element  = "<td>"   players[i].victories   "</td>";
    element  = "<td>"   players[i].ties   "</td>";
    element  = "<td>"   players[i].defeats   "</td>";
    element  = "<td>"   players[i].points   "</td>";
    element  = "<td><button class='w' onClick='addVictory("   i   ")'>Victory</button></td>";
    element  = "<td><button class='t' onClick='addTie("   i   ")'>Tie</button></td>";
    element  = "<td><button class='d' onClick='addDefeat("   i   ")'>Defeat</button></td>";
    element  = "</tr>";
  }
  var playerTable = document.querySelector("tbody");
  playerTable.innerHTML = element;
}

showPlayersOnScreen(players);

function addVictory(i) {
  var player = players[i];
  player.victories  ;
  player.points = calculatePoints(player);
  showPlayersOnScreen(players);
}

function addTie(i) {
  var player = players[i];
  player.ties  ;
  player.points = calculatePoints(player);
  showPlayersOnScreen(players);
}

function addDefeat(i) {
  var player = players[i];
  player.defeats  ;
  showPlayersOnScreen(players);
}

<table>
  <thead>
    <tr>
      <th>Player</th>
      <th>Victories</th>
      <th>Ties</th>
      <th>Defeats</th>
      <th>Points</th>
      <th colspan="3">Actions</th>
    </tr>
  </thead>
  <tbody id="playerT">
</table>

uj5u.com熱心網友回復：

可能您沒有tbody的結束標簽

<tbody id="playerT">

應該

<tbody id="playerT"></tbody>

uj5u.com熱心網友回復：

您可以使用 HTML DOM Table insertRow() 函式將資料插入到表中，而不是將這樣的 html 添加到表中。

你可以在這里閱讀更多關于它是如何作業的：https ://www.w3schools.com/jsref/met_table_insertrow.asp

一個簡單的例子來說明它是如何作業的：

var shepard = {
  name: "Commander",
  victories: 3,
  ties: 1,
  defeats: 6,
  points: 0
};
var lara = {
  name: "RaiderOfTombs",
  victories: 2,
  ties: 1,
  defeats: 7,
  points: 0
};
var altair = {
  name: "HiddenOne",
  victories: 4,
  ties: 1,
  defeats: 5,
  points: 0
};

function calculatePoints(player) {
  var points = player.victories * 3   player.ties;
  return points;
}

shepard.points = calculatePoints(shepard);
lara.points = calculatePoints(lara);
altair.points = calculatePoints(altair);
var players = [shepard, lara, altair];

function showPlayersOnScreen(players) {
  var element = "";
  const table = document.getElementById("player-table")
  for (const player of players) {
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    cell1.innerHTML = player.name;
    var cell2 = row.insertCell(1);
    cell2.innerHTML = player.victories;
    var cell2 = row.insertCell(2);
    cell2.innerHTML = player.ties;
    var cell2 = row.insertCell(3);
    cell2.innerHTML = player.defeats;
    var cell2 = row.insertCell(4);
    cell2.innerHTML = player.points;
  }
}

showPlayersOnScreen(players);

function addVictory(i) {
  var player = players[i];
  player.victories  ;
  player.points = calculatePoints(player);
  showPlayersOnScreen(players);
}

function addTie(i) {
  var player = players[i];
  player.ties  ;
  player.points = calculatePoints(player);
  showPlayersOnScreen(players);
}

function addDefeat(i) {
  var player = players[i];
  player.defeats  ;
  showPlayersOnScreen(players);
}

<table id="player-table">
  <thead>
    <tr>
      <th>Player</th>
      <th>Victories</th>
      <th>Ties</th>
      <th>Defeats</th>
      <th>Points</th>
      <th colspan="3">Actions</th>
    </tr>
  </thead>
  <tbody id="playerT"></tbody>
</table>

標籤：javascript html html表

上一篇：禁止（CSRF令牌丟失或不正確。）如何將CSRF令牌從前端發送到后端？

下一篇：使用useEffect掛鉤ReactRouteruseNavigate-正確的使用方式？