html table using js

uservGZk1 0
Viewed 35

I'm trying to fill up a html body table with javascript, but it's not rendering, anyone can tell me why?

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>

I've tried changing the selector to the id and using getElementById, creating the tbody on the script with createElement, also try creating the whole thing there, have writE and rewrite all the code, I'm hopeless.

html-table javascript html
3 Answers

Probably you do not have closing tag for tbody

<tbody id="playerT">

should be

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

You have a typo in your for loop declaration, it should be players.length not players.lenght. The later will be undefined and thus the loop won't execute.

Here's the corrected version:

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>

ths0

Instead of adding html like this into the table, you can use the HTML DOM Table insertRow() function to insert data into a table.

You can read more about it here for how this would work: https://www.w3schools.com/jsref/met_table_insertrow.asp

A quick example of how it would work:

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>

Timo Frionnet0
Related