I have a table. I tried adding one column for rating. The problem is that all the stars are coming at the same cell. Here is my JSP code
<tbody>
<c:forEach var="history" items="${history}" varStatus="loopCounter">
<c:forEach var="child" items="${history.child}" varStatus="loopCounter2">
<tr>
<td align="left">
<span class = "item">
<img src="img/vendor_logos/<c:out value="${child.courierProduct.logoName}" />"/>
</span>
</td>
<td align="left">
<span>
<c:out value="${child.routeDetails.sourceName}" />
</span>
</td>
<td align="left">
<span>
<c:out value="${child.routeDetails.destinationName}" />
</span>
</td>
<td align="left">
<span class="cost" style="font-size: 23px;"><img src="img/rs.png" />
<c:out value="${history.cost}" />/-
</span>
</td>
<td align="left">
<span>
<c:out value="${child.orderTime}" />
</span>
</td>
<td align="left">
<span style="" id= "${loopCounter.index}">
<input name="star1" type="radio" class="star" id="${loopCounter.index}" />
</span>
</td>
</tr>
</c:forEach>
</c:forEach>
</tbody>
The problem is that instead of coming in different rows all the stars are coming at the same cell. I am using http://www.fyneworks.com/jquery/star-rating/ jquery plugin.
Resulting HTML code of the page (saved from the browser) is :
<table id="myTable" class="tablesorter" width="755" border="0"
cellspacing="0" cellpadding="0" class="sortable">
<thead>
<tr>
<th width="25%" height="67" align="center" bgcolor="#f7f6f6">
<span class="ser service"> Service Provider</span>
</th>
<th width="23%" height="67" align="center" bgcolor="#f7f6f6">
<span class="ser icon1 icon2">Delivery Time </span>
</th>
<th width="20%" height="67" align="center" bgcolor="#f7f6f6">
<span class="ser icon1 icon3">Cost </span>
</th>
<th width="20%" height="67" align="center" bgcolor="#f7f6f6">
</th>
<th width="31%" height="50" bgcolor="#f7f6f6" align="right">
<span class="ser">Ratings </span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><div>
<span class="item"> <img
src="img/vendor_logos/economy-logo.png" />
<ul class="icon">
</ul>
</span>
</div></td>
<td><span>5
days</span></td>
<td><span class="cost" style="font-size: 23px;"><img
src="img/rs.png"> 766/-</span></td>
<td>
<div id="javax.servlet.jsp.jstl.core.LoopTagSupport$1Status@60f0139a" class="details">
<span class="det"><a href="#">Details</a> <span
class="fulv">
<div class="col">
<p>
Cost - Rs-
670
</p>
<p>
Service Tax - Rs-
96
</p>
<p>
Total - Rs -
766
</p>
</div>
<!--ocl-->
</span>
<!--fulv--> </span> <span class="book"><a
href="BookingConfirmAction?routeIndex=0&routeOptionIndex=0">Book
Now</a></span>
</div> <!--details-->
</td>
<td>
<div id="starVin">
<input type="radio" name="rating" value="1" class="star"/>
<input type="radio" name="rating" value="2" class="star"/>
<input type="radio" name="rating" value="3" class="star"/>
<input type="radio" name="rating" value="4" class="star"/>
<input type="radio" name="rating" value="5" class="star"/>
</div>
</td>
</tr>
<tr>
<td><div>
<span class="item"> <img
src="img/vendor_logos/bluedart.png" />
<ul class="icon">
<img src="img/serviceGuarantee.png" />
<img src="img/delivery3.png" />
</ul>
</span>
</div></td>
<td><span>1
days</span></td>
<td><span class="cost" style="font-size: 23px;"><img
src="img/rs.png"> 251/-</span></td>
<td>
<div id="javax.servlet.jsp.jstl.core.LoopTagSupport$1Status@60f0139a" class="details">
<span class="det"><a href="#">Details</a> <span
class="fulv">
<div class="col">
<p>
Cost - Rs-
220
</p>
<p>
Service Tax - Rs-
31
</p>
<p>
Total - Rs -
251
</p>
</div>
<!--ocl-->
</span>
<!--fulv--> </span> <span class="book"><a
href="BookingConfirmAction?routeIndex=0&routeOptionIndex=1">Book
Now</a></span>
</div> <!--details-->
</td>
<td>
<div id="starVin">
<input type="radio" name="rating" value="1" class="star"/>
<input type="radio" name="rating" value="2" class="star"/>
<input type="radio" name="rating" value="3" class="star"/>
<input type="radio" name="rating" value="4" class="star"/>
<input type="radio" name="rating" value="5" class="star"/>
</div>
</td>
</tr>
<tr>
<td><div>
<span class="item"> <img
src="img/vendor_logos/bluedart.png" />
<ul class="icon">
<img src="img/serviceGuarantee.png" />
<img src="img/delivery3.png" />
</ul>
</span>
</div></td>
<td><span>2
days</span></td>
<td><span class="cost" style="font-size: 23px;"><img
src="img/rs.png"> 629/-</span></td>
<td>
<div id="javax.servlet.jsp.jstl.core.LoopTagSupport$1Status@60f0139a" class="details">
<span class="det"><a href="#">Details</a> <span
class="fulv">
<div class="col">
<p>
Cost - Rs-
550
</p>
<p>
Service Tax - Rs-
79
</p>
<p>
Total - Rs -
629
</p>
</div>
<!--ocl-->
</span>
<!--fulv--> </span> <span class="book"><a
href="BookingConfirmAction?routeIndex=0&routeOptionIndex=2">Book
Now</a></span>
</div> <!--details-->
</td>
<td>
<div id="starVin">
<input type="radio" name="rating" value="1" class="star"/>
<input type="radio" name="rating" value="2" class="star"/>
<input type="radio" name="rating" value="3" class="star"/>
<input type="radio" name="rating" value="4" class="star"/>
<input type="radio" name="rating" value="5" class="star"/>
</div>
</td>
</tr>
<tr>
<td><div>
<span class="item"> <img
src="img/vendor_logos/madhur.png" />
<ul class="icon">
<img src="img/priceGuarantee.png" />
<img src="img/serviceGuarantee.png" />
<img src="img/delivery3.png" />
</ul>
</span>
</div></td>
<td><span>2
days</span></td>
<td><span class="cost" style="font-size: 23px;"><img
src="img/rs.png"> 91/-</span></td>
<td>
<div id="javax.servlet.jsp.jstl.core.LoopTagSupport$1Status@60f0139a" class="details">
<span class="det"><a href="#">Details</a> <span
class="fulv">
<div class="col">
<p>
Cost - Rs-
80
</p>
<p>
Service Tax - Rs-
11
</p>
<p>
Total - Rs -
91
</p>
</div>
<!--ocl-->
</span>
<!--fulv--> </span> <span class="book"><a
href="BookingConfirmAction?routeIndex=0&routeOptionIndex=3">Book
Now</a></span>
</div> <!--details-->
</td>
<td>
<div id="starVin">
<input type="radio" name="rating" value="1" class="star"/>
<input type="radio" name="rating" value="2" class="star"/>
<input type="radio" name="rating" value="3" class="star"/>
<input type="radio" name="rating" value="4" class="star"/>
<input type="radio" name="rating" value="5" class="star"/>
</div>
</td>
</tr>
<!-- <br> -->
</tbody>
</table>
I have copied just the table part to keep it short. Sorry for the messy HTML code. Here is the link to the output image file
http://s7.postimg.org/92munusqz/Capture.png
The stars are coming at the same cell because their id are same. modify the code as :
<input type="radio" name="rating-${loopCounter2.index}" value="1" class="rating-star${loopCounter2.index}"/>
<input type="radio" name="rating-${loopCounter2.index}" value="2" class="rating-star${loopCounter2.index}"/>
<input type="radio" name="rating-${loopCounter2.index}" value="3" class="rating-star${loopCounter2.index}"/>
<input type="radio" name="rating-${loopCounter2.index}" value="4" class="rating-star${loopCounter2.index}"/>
<input type="radio" name="rating-${loopCounter2.index}" value="5" class="rating-star${loopCounter2.index}"/>
Here ids are different. So it wont place all stars at the same place.