jquery星级不在表中工作

时间:2015-04-06 06:18:32

标签: jquery jsp jquery-plugins rating

我有一张桌子。我尝试添加一列进行评级。问题是所有的恒星都来自同一个细胞。这是我的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&nbsp;
                                                        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&nbsp;
                                                        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&nbsp;
                                                        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&nbsp;
                                                        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

1 个答案:

答案 0 :(得分:2)

明星们来到同一个牢房,因为他们的身份是相同的。将代码修改为:

<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}"/>

这里的ids是不同的。因此它不会将所有星星放在同一个地方。