有没有办法在 JavaScript 中的数组内创建评级图像（5 星、4 星、3 星等...）并在 HTML 中将其全部输出为 table？

Question

下面的代码是我一直在努力的。当我根据计算的分数对产品进行评分时，我认为我的逻辑存在缺陷，这就是我混淆的地方。而且我也不确定如何根据分数创建评级图像。数组中的第一列是分值，第二列是产品ID，第三列是产品名称，第四列是品牌网站的link。我想在第五列输出一张反映产品得分的图像。例如，如果我根据分数对产品进行排序，并且我希望首先列出分数最高的产品，那么它应该是 products[1] with a 5 star image, products[3] with a 4 star image, products [0] 具有 3 星图像，产品 [4] 具有 2 星图像，产品 [2] 具有 1 星图像。注意：出于某种原因，language="JavaScript" 对我有效，而 type="text/javascript" 无效。如果有人可以为此代码提供任何指导，我将由衷地感激不尽。非常感谢您:)

HTML:

<table id="table">
  <tr id="tbody">
<th>Score</th>
<th>ID</th>
<th>Name</th>
<th>Website</th>
<th>Rating</th>
  </tr>
</table>

JAVASCRIPT:

var products = new Array(5);
products[0] = [26, 4859, "Panasonic TV", "http://www.panasonic.com"];
products[1] = [37, 4762, "Sony TV", "http://www.sony.com"];
products[2] = [9, 4899, "LG TV", "http://www.lg.com"];
products[3] = [34, 5001, "Samsung TV", "http://www.samsung.com"];
products[4] = [22, 3425, "Vizio TV", "http://www.vizio.com"];

function Comparator(a,b) {
  if (if (a[0] > b[0]) return -1;
  if (a[0] < b[0]) return 1;
  return 0;
}

var productsSorted = products.sort(Comparator);

for (i=0; i<products.length, i++) {
  if (products[0] === 37) {
    document.getElementById("IMG5");
  } else if (products[0] === 34) {
    document.getElementById("IMG4");
  } else if (products[0] === 26) {
    document.getElementById("IMG3");
  } else if (products[0] === 22) {
    document.getElementById("IMG2");
  } else {
    document.getElementById("IMG1");
};


table.appendChild(tbody);
productsSorted.forEach(function(item) {

var row = document.createElement("tr");

    var score = document.createElement("td");
score.textContent = item[0];

var ID= document.createElement("td");
ID.textContent = item[1];

var name = document.createElement("td");
name.textContext = item[2];

var link_td = document.createElement("td");
var link = document.createElement("a");
link.textContent = item[3]
    link.href = item[3]
link_td.appendChild(link);

    var rating = new Array(5);
    var rating_td = document.createElement("td");           
var rating[0] = document.createElement("IMG5");
    rating.setAttribute("src","http://dkcoin8.com/images/five-star-clipart-4.png");
    var rating[1] = document.createElement("IMG4");
    rating.setAttribute("src","http://aliviogroup.com.au/wp-content/uploads/2016/04/four-stars.jpg");
    var rating[2] = document.createElement("IMG3");
    rating.setAttribute("src","https://waytoomuchtelevision.files.wordpress.com/2011/01/3star.jpg");
    var rating[3] = document.createElement("IMG2");
    rating.setAttribute("src","https://authorjanedoe.files.wordpress.com/2012/07/2star.jpg");
    var rating[4] = document.createElement("IMG1");
    rating.setAttribute("src","http://clipart.printcolorcraft.com/wp-content/uploads/stars/smooth%20star.jpg");
    rating_td.appendChild(rating);


row.appendChild(score);
row.appendChild(ID);
row.appendChild(name);
row.appendChild(link);
row.appendChild(rating);

table.appendChild(row);
});

Answer 1

创建背景为白色且星星透明的星星 png。将其中的 5 个并排放置在 div 中（或在您的情况下为 td ）。创建另一个黄色矩形的图像。将星星 div/td 的背景设置为黄色矩形。将 div/td 的 background-size 参数设置为基于分数的百分比。因此，如果平均得分为 70%，则 70% 的背景将是黄色，从而产生 3 颗黄色星星、一颗部分填充黄色的星星和一颗未填充的星星。

说到分数...它们似乎是分数的总和。如果是这种情况，那么您应该计算平均值而不是总和并将其放在第一列中，或者包括评分数量以便计算平均分。例如，如果分数 9 是 4/5 和 5/5 的结果，那么您的实际分数是 9/10 或 90%。

function createRows() {
  var products = new Array(5);
  products[0] = [84, 4859, "Panasonic TV", "http://www.panasonic.com"];
  products[1] = [73, 4762, "Sony TV", "http://www.sony.com"];
  products[2] = [90, 4899, "LG TV", "http://www.lg.com"];
  products[3] = [88, 5001, "Samsung TV", "http://www.samsung.com"];
  products[4] = [44, 3425, "Vizio TV", "http://www.vizio.com"];
  var items = document.getElementById("items");

 Array.prototype.forEach.call(products, function(prod) {
    var row = document.createElement("div");
    row.className = "row";
    var fields = new Array(4);
    var field_num = 0;
    Array.prototype.forEach.call(prod, function(field) {
     fields[field_num] = document.createElement("div");
     fields[field_num].className = "field";
      if (field_num > 0) {
       fields[field_num].innerHTML = prod[field_num];
        fields[field_num].id = "field" + field_num;
      }
      row.append(fields[field_num]);
      field_num++;
    });
    fields[0].id = "rating";
    fields[0].style.backgroundSize = prod[0] + "% 50px";
    for (i=0; i < 5; i++) {
      var star = document.createElement("img");
      star.src = "https://i.imgur.com/jxqW2CC.png";
      fields[0].append(star);
    }
    items.append(row);
  });
}
createRows();

.field {
  display: inline-block;
  line-height: 19px;
  vertical-align: top;
  padding: 3px 5px;
}
#field1 {
  width: 50px;
  border-right: 1px solid black;
  height: 100%;
}
#field2 {
  width: 100px;
  border-right: 1px solid black;
}
.row {
  border: 1px solid black;
  margin: 5px;
  font: 14px Arial, sans-serif;
  background: white;
}
#rating {
  height: 25px;
  width: 125px;
  padding: 0px;
  border-right: 1px solid black;
  background: #ccc url(http://weclipart.com/gimg/827E9394EC65E95F/12e902ef8c564cdfb22cf736428a35cf-800.png) no-repeat;
}
#rating img {
  height: 25px;
  padding: 0px;
}

<div id="items">
</div>

有没有办法在 JavaScript 中的数组内创建评级图像（5 星、4 星、3 星等...）并在 HTML 中将其全部输出为 table？

Is there a way to create rating images (5 stars, 4 stars, 3 stars, etc...) inside an array in JavaScript and output it all as a table in HTML?

javascript

image

multidimensional-array

html-table

rating-system