star rating

HTML

<table>
    <thead><tr><th>Opción</th><th>Importancia</th></tr></thead>
    <tbody >
        <tr> 
            <td >Opción 1</td>
            <td class="starRating"> </td>
    </tr >
        <tr>
            <td >Opción 2</td>
            <td class="starRating"> </td>
        </tr>    
        <tr>
            <td >Sel. Pos.:</td>
            <td id="position"> </td>
        </tr>    
    </tbody>
</table>
</br>
<div class="star"></div>

CSS

table { background-color: #cde; padding: 1em; border-radius: 0.5em; }
table th { text-align:left; }
table th:last-child { min-width: 130px; }

.starRating span { width:24px; height:24px; background-image: url(http://learn.knockoutjs.com/Content/TutorialSpecific/stars.png); display:inline-block; cursor: pointer; background-position: -24px 0; }
.starRating span.chosen { background-position: 0 0; }
.starRating:hover span { background-position: -24px 0; }
.starRating:hover span.hoverChosen { background-position: 0 0; }


div.star{ width:100%;height:22px;}
.star span{
  width:20px; height:20px;
  display:inline-block; cursor: pointer;
   background-color: silver;
   -webkit-mask-image:url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
    mask:url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [<!ENTITY ns_svg "http://www.w3.org/2000/svg"><!ENTITY ns_xlink "http://www.w3.org/1999/xlink">]><svg xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="20px" height="20px" viewBox="0 0 20 20" ><defs><mask id="maskid" maskUnits="objectBoundingBox"><polygon stroke="%23FFFFFF" fill="%23FFFFFF" stroke-miterlimit="10" points="10,0 13.09,6.583 20,7.639 15,12.764 16.18,20 10,16.583 3.82,20 5,12.764 0,7.639 6.91,6.583  "/></mask></defs><g><polygon stroke="%23FFFFFF" stroke-miterlimit="10" points="10,0 13.09,6.583 20,7.639 15,12.764 16.18,20 10,16.583 3.82,20 5,12.764 0,7.639 6.91,6.583 "/></g></svg>#maskid');
}
.star span.chosen {...

JavaScript

$(function () {
   // your code goes here
	 $(".starRating,.star").each( function(){
        for (var i = 0; i < 6; i++)
           $("<span>").appendTo(this);
           
        $("span", this).each(function(index) {
          $(this).click(
          	function() { $("#position").html(index+1);
            						$(this).prevAll().add(this).addClass("chosen") }).click(
            function() { $(this).nextAll().removeClass("chosen") } 
          );
        	$(this).hover(
              function() {$(this).prevAll().add(this).addClass("hoverChosen") },
              function() { $(this).prevAll().add(this).removeClass("hoverChosen") }  
          );
 			  });   
   });
});