我有一张 table 。我尝试添加一栏进行评级。问题是所有的星星都来到同一个牢房里。这是我的 JSP 代码
<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>
问题在于，所有星星都出现在同一个单元格中，而不是出现在不同的行中。我正在使用http://www.fyneworks.com/jquery/star-rating/ jquery 插件。
页面的 HTML 代码(从浏览器保存)为:
<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>
为了保持简短，我只复制了表格部分。抱歉，HTML 代码很困惑。这是输出图像文件的链接
http://s7.postimg.org/92munusqz/Capture.png
最佳答案
星星会来到同一个单元格，因为它们的 id 相同。将代码修改为:
<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}"/>
这里的 id 是不同的。所以它不会将所有星星放在同一个地方。
关于jquery 星级评定在表中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29466320/