jquery星級評定不在表

我有一張桌子。我嘗試添加一列進行評分。問題是所有的星星都在同一個單元格中。這裏是我的JSP代碼jquery星級評定不在表

<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&nbsp; 
                 days</span></td> 
               <td><span class="cost" style="font-size: 23px;"><img 
                 src="img/rs.png"> 766/-</span></td> 
               <td> 

                <div id="[email protected]" 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&nbsp; 
                 days</span></td> 
               <td><span class="cost" style="font-size: 23px;"><img 
                 src="img/rs.png"> 251/-</span></td> 
               <td> 

                <div id="[email protected]" 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&nbsp; 
                 days</span></td> 
               <td><span class="cost" style="font-size: 23px;"><img 
                 src="img/rs.png"> 629/-</span></td> 
               <td> 

                <div id="[email protected]" 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&nbsp; 
                 days</span></td> 
               <td><span class="cost" style="font-size: 23px;"><img 
                 src="img/rs.png"> 91/-</span></td> 
               <td> 

                <div id="[email protected]" 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

來源

2015-04-06 user3681970

你可以使用jsfiddle，這樣我們可以幫你麻煩嗎？ – dsharew 2015-04-06 06:27:00

先生..這是鏈接到輸出文件。 http://s28.postimg.org/x52izxw6l/Capture.png。由於雜亂的表和歷史對象的CSS是通過行動類創建的，我無法上傳小提琴。你可以看看輸出圖像和jQuery插件（問題中給出的鏈接），並使用它可以建議一些東西？ – user3681970 2015-04-06 06:34:48

這是juery-star-rating-css插件https://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.css – user3681970 2015-04-06 06:39:33

星星來自同一個單元，因爲它們的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是不同的。所以它不會把所有的星星放在同一個地方。

來源

2015-04-23 09:33:00 user3681970

jquery星級評定不在表

回答

相關問題