javascript - 有没有办法在 JavaScript 数组中创建评级图像(5 星、4 星、3 星等...)并将其全部输出为 HTML 中的表格？

Question

下面的代码是我一直在研究的代码。当我根据产品的计算分数对产品进行评级时，我认为我的逻辑是有缺陷的，这就是我混淆的地方。而且我也不确定如何根据分数创建评级图像。数组中的第一列是得分值，第二列是产品 ID，第三列是产品名称，第四列是品牌网站的链接。我想在第五列中输出一张反射(reflect)产品得分的图像。例如，如果我根据分数对产品进行排序，并且希望首先列出分数最高的产品，那么它应该是具有 5 星图像的产品 [1]、具有 4 星图像的产品 [3]、 [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 的背景大小参数设置为基于分数的百分比。因此，如果平均分数为 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(https://upload.wikimedia.org/wikipedia/commons/1/15/Orange_rectangle.svg) no-repeat;
}
#rating img {
  height: 25px;
  padding: 0px;
}

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