数字加减控件实现

效果：

样式：

.gw_num{border: 1px solid #dbdbdb;width: 110px;line-height: 26px;overflow: hidden;}
    .gw_num em{display: block;height: 26px;width: 31px;float: left;color: #7A7979;border-right: 1px solid #dbdbdb;text-align: center;cursor: pointer;font-style:normal;}
    .gw_num .num{display: block;float: left;text-align: center;width: 42px;font-style: normal;font-size: 14px;line-height: 24px;border: 0;}
    .gw_num em.add{float: right;border-right: 0;border-left: 1px solid #dbdbdb;}

jsp:

<tbody>
                <c:forEach items="${uservos}" var="uservo">
                    <tr>
                        <td >${uservo.username}<input type="hidden" name="names" value="${uservo.username}"/></td>

                        <td align="center">
                        <div class="gw_num">
                            <em class="jian">-</em>
                            <input type="text" value="${uservo.score==null?100:uservo.score}"  name="scores" class="num" readonly/>
                            <em class="add">+</em>
                        </div>
                        </td>
                    </tr>
                </c:forEach>
            </tbody>

js实现加减效果：

 $(".add").click(function(){
        var n=$(this).prev().val();
        var num=parseInt(n)+1;
        if(num>120){ return;}
        $(this).prev().val(num);
        });
        //减的效果
        $(".jian").click(function(){
        var n=$(this).next().val();
        var num=parseInt(n)-1;
        if(num<60){ return;}
        $(this).next().val(num);
        });