JSP中捕捉动态循环创建的表格行的事件

背景
在java web的学习过程中，做了一个购物车的练习项目，以表格的形式在页面展示购物车中商品（书籍）的列表（每一行一本书），在每一行使用 ajax技术实现对商品数量的增减，但是表格行动态的生成的且需捕捉书籍ID如何实现呢？

商品数量页面展示设计：
因商品数量需输入修改，故商品的数量采用input框展示；且商品数量与商品具有一一对应关系，故input框的id采用bookid，那么关键来了如何获取input框的id呢？

实际作出来的页面效果图：
动态生成购物车列表如下代码：

<%
        // cartItemList——购物车中商品项集合
       for (CartItem cartItem : cartItemList) {
           Integer bookId = cartItem.getBook().getBookId();
        %>
        <form action="shopping/order/submit" method="post">
            <tr>
                <td><input type="checkbox" name="selected" class="selectedItem" value="<%=bookId%>">
                    <a href="book/detail?bookId=<%=bookId %>"><%= cartItem.getBook().getBookName()%></a>
                </td>
                <td><%= cartItem.getBook().getAuthor()%></td>
                <td>单价：<%= cartItem.getBook().getBookPrice()%> </td>
                <td >小计<span class="<%=bookId%>"><%=cartItem.getItemtotalPrice()%></span></td>
                <td>数量<input type="button" data-bookid="<%=bookId%>" class="addnum btn" value="+" >
                    <input type="text" style="width: 20px;padding-left: 4px" name="modifynum"  id="<%=bookId%>"
                           class="booknum" value="<%=cartItem.getItemtotalNum()%>">
                    <input type="button" data-bookid="<%=bookId%>" class="subnum btn" value="-">
                </td>
                <td><input type="button" data-bookid="<%=bookId%>" class="deletebtn" value="删除"></td>
            </tr>

            <% } %>

JQuery实现
采用事件属性target，则可获取当前事件的节点，进而获取所需的关键商品id

JQuery代码如下：

// addnum表格每行的 + button的class
$(".addnum").click(function (e) {
			// 通过e.target获取当前事件的节点，进而获取自定义属性获取关键属性book_id
            var bookid = e.target.getAttribute("data-bookid");
            // 通过JQuery的 “#”+变量 筛选的作用，获取数量
            var booknum = parseInt($("#" + bookid).val()) + 1;
            var modifyMsg = {
                "bookId": bookid,
                "newNum": booknum
            }
            $.post("/cggu/shopping/cart/modifyitemnum", modifyMsg, function (data) {
                $("#" + bookid).val(data.itemTotalNum);
                $("." + bookid).text(data.itemTotalPrice);
                $("#totalNum").text(data.totalNum);
                $("#totalPrice").text(data.totalPrice);
            }, "json")
        })
         $(".booknum").blur(function (e) {
            // 通过e.target获取当前事件的节点，进而直接获取input框的id，即bookid
            var bookid = e.target.id;
            var newNum = parseInt($("#" + bookid).val());
            if (newNum <= 0) {
                newNum = 1;
                alert("本店拒绝小于等于0的订单，请选择删除该商品")
            }
            var modifyMsg = {
                "bookId": bookid,
                "newNum": newNum
            }
            $.post("/cggu/shopping/cart/modifyitemnum", modifyMsg, function (data) {
                $("#" + bookid).val(data.itemTotalNum);
                $("." + bookid).text(data.itemTotalPrice);
                $("#totalNum").text(data.totalNum);
                $("#totalPrice").text(data.totalPrice);
            }, "json")
        })

总结
①深刻的记住了e.target的强大作用，相信在以后也能用到
②发现了新大陆——JQuery的选择器竟然不仅仅局限于字符串常量，也可以是变量