Replace with Stars

by Laurie

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<table width="100%" class="ms-listviewtable" id="{0CD6F714-E61C-4FE7-9FBE-87E54A40AAAA}-{A230DD8E-A5B5-47A3-9DC7-B89C60DA5590}" dir="none" border="0" cellSpacing="0" cellPadding="1" summary="Vendors " _events="[object Object]" xmlns:o="" o:WebQuerySourceHref="" clvp="[object Object]" handleDeleteInit="true">
    <tbody>
        <tr class="ms-viewheadertr ms-vhltr" vAlign="top">
            <th class="ms-vh-icon" scope="col">
                <input title="Select or deselect all items" class="s4-selectAllCbx" onclick="ToggleAllItems(event,this,35)" type="checkbox" value="on" />
            </th>
            <th class="ms-vh2" noWrap="" onmouseover="OnChildColumn(this)" onmouseout="" onclick="" oncontextmenu="" scope="col">
                <div class="ms-vh-div" name="LinkTitle" SortFields="View={a230dd8e-a5b5-47a3-9dc7-b89c60da5590}&SortField=LinkTitle&SortDir=Asc" ResultType="" FieldType="Computed" DisplayName="Title" CTXNum="35" FilterDisableMessage="" Filterable="" FilterDisable="" SortDisable="" Sortable=""> <a id="diidSortLinkTitle" onclick="javascript:return OnClickFilter(this,event);" onfocus="OnFocusFilter(this)" href="javascript: " SortingFields="View={a230dd8e-a5b5-47a3-9dc7-b89c60da5590}&SortField=LinkTitle&SortDir=Asc">Title<img width="1" height="1" class="ms-hidden" alt="Use SHIFT+ENTER to open the menu (new window)." src="/_layouts/images/blank.gif" border="0" /></a>

                    <img alt="" src="/_layouts/images/blank.gif" border="0" />
                    <img alt="" src="/_layouts/images/blank.gif" border="0" />
                </div>
                <div class="s4-ctx" style="left: 111px; top: 0px; height: 32px; line-height: 32px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;" shown="false"> <span>&nbsp;</span><a title="Open Menu" onclick="PopMenuFromChevron(event); return false;"...

CSS

.fa-star-o {
    color:#808080
}
.fa-star {
    color:#FFD700
}

JavaScript

$(function () {

     //find col
     var Index = 0;
     $(".ms-listviewtable tr th").each(function (i) {
         if ($(this).find("div").attr("name") == "Score") {
             Index = i;
         }
     });

    
     //update col
     $(".ms-listviewtable tr").each(function (i) {
         if (i > 0) {
             var curVal = $(this).find("td").eq(Index).text();

             if (curVal == '1') {
                 newVal = '<i class="fa fa-star" ></i>';
                 newVal = newVal + '<i class="fa fa-star-o" ></i>';
                 newVal = newVal + '<i class="fa fa-star-o" ></i>';
                 newVal = newVal + '<i class="fa fa-star-o" ></i>';
                 newVal = newVal + '<i class="fa fa-star-o" ></i>';
             } else if (curVal == '2') {
                 newVal = '<i class="fa fa-star" ></i>';
                 newVal = newVal + '<i class="fa fa-star" ></i>';
                 newVal = newVal + '<i class="fa fa-star-o" ></i>';
                 newVal = newVal + '<i class="fa fa-star-o" ></i>';
                 newVal = newVal + '<i class="fa fa-star-o" ></i>';
             } else if (curVal == '3') {
                 newVal = '<i class="fa fa-star" ></i>';
                 newVal = newVal + '<i class="fa fa-star" ></i>';
                 newVal = newVal + '<i class="fa fa-star" ></i>';
                 newVal = newVal + '<i class="fa fa-star-o" ></i>';
                 newVal = newVal + '<i class="fa fa-star-o" ></i>';
             } else if (curVal == '4') {
                 newVal = '<i class="fa fa-star" ></i>';
                 newVal = newVal + '<i class="fa fa-star" ></i>';
                 newVal = newVal + '<i class="fa fa-star" ></i>';
                 newVal = newVal + '<i class="fa fa-star" ></i>';
                 newVal = newVal + '<i class="fa fa-star-o" ></i>';
             } else if (curVal == '5') {
                 newVal = '<i class="fa fa-star" ></i>';
                 newVal = newVal + '<i class="fa fa-star" ></i>';
...