jquery 星级评分在 table 中不起作用
jquery star rating not working in table
我有一个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.LoopTagSupportStatus@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.LoopTagSupportStatus@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.LoopTagSupportStatus@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.LoopTagSupportStatus@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>
为了简短起见，我只复制了 table 部分。抱歉 HTML 代码混乱。这是输出图像文件
的link
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不同。所以它不会把所有的星星都放在同一个地方。
我有一个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.LoopTagSupportStatus@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.LoopTagSupportStatus@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.LoopTagSupportStatus@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.LoopTagSupportStatus@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>
为了简短起见，我只复制了 table 部分。抱歉 HTML 代码混乱。这是输出图像文件
的linkhttp://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不同。所以它不会把所有的星星都放在同一个地方。