JavaScript内の配列内に評価画像（5つ星、4つ星、3つ星など）を作成し、すべてをHTMLの表として出力する方法はありますか？

Question

以下のコードは私が取り組んできたものです。計算された得点に基づいて商品を評価すると、自分のロジックに欠陥があると思います。これは混乱しています。また、スコアに基づいて評価画像を作成する方法もわかりません。配列の最初の列はスコア値、2番目の列はプロダクトID、3番目の列はプロダクトの名前、4番目の列はブランドWebサイトへのリンクです。私は製品のスコアを反映する画像を第5列に出力したい。たとえば、スコアに基づいて商品を並べ替える場合、最初に高いスコアを持つ商品を表示したい場合は、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を作成します。 div（またはあなたの場合はtd）に5つ並べて並べます。黄色の長方形の別のイメージを作成します。星のdiv/tdの背景を黄色の長方形に設定します。 div/tdのbackground-sizeパラメータをスコアに基づいてパーセンテージとして設定します。平均スコアが70％の場合、背景の70％が黄色になり、黄色の星3個、黄色の部分1個、塗りつぶされていない星1個が表示されます。

スコアといえば...スコアの合計と思われます。そうであれば、合計の代わりに平均を計算し、それを最初の列に入れるか、平均スコアを計算できるように格付けの数を含めてください。たとえば、スコア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"); 
 

 
\t 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) { 
 
    \t fields[field_num] = document.createElement("div"); 
 
    \t fields[field_num].className = "field"; 
 
     if (field_num > 0) { 
 
     \t 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>