js按钮获取表单内容

参照问题

js 表格的每一行都有一个按钮 点击按钮修改当前行某一列的信息
<table><tbody>
<tr>
<td>4</td>
<td id='r'>5<td>
<td><a href="#"><button type="button" >修改</button></a></td>
<td><a href="#"><button type="button" >保存</button></a></td>
</tr>
</tbody></table>
这个tr里的内容是循环出来的,每一行都有一个修改的按钮 ,现在想点击某一行的按钮修改每一行中id='r'这一个td的值

解决答案

<table><tbody>
<tr>
    <td>4</td>
    <td id='r'>5<td>
    <td><a href="#"><button type="button" onclick="update(this)">修改</button></a></td>
    <td><a href="#"><button type="button" onclick="save(this)">保存</button></a></td>
</tr>
</tbody></table>


===================

var update = function(btn){
    var tr = btn.parentElement.parentElement.parentElement;
    var td = tr.cells[1];
    var txt = document.createElement("input");
    txt.type="text";
    txt.value = td.innerHTML;
    td.innerHTML = "";
    td.appendChild(txt);
}

var save = function(btn){
    var tr = btn.parentElement.parentElement.parentElement;
    var td = tr.cells[1];
    td.innerHTML = td.children[0].value;
}

自己的问题

每个商品点击加入购物车可以进行数据提交

商品列表:
        <table  border=1>
            <tr>
                <td>商品编号</td>
                <td>商品名称</td>
                <td>商品价格</td>
                <td>商品描述</td>
                <td>购买数量</td>
            </tr>
            <c:forEach items="${page.data }" var="item">
            <tr class="additem" id="additem">
                <td><input type="text" value="${item.item_id }" name="item_id" readonly
                    style="border: 0px;" /></td>
                <td><input type="text" value="${item.item_name }" name="item_name" readonly
                    style="border: 0px;" /></td>
                <td><input type="text" value="${item.item_price }" name="item_price" readonly
                    style="border: 0px;" /></td>
                <td><input type="text" value="${item.item_detail }"
                    style="border: 0px;" name="item_detail" readonly /></td>
                <td><input class="min" name="" type="button" value="-" /> <input
                    class="text_box" name="count" type="text" value="0" id="num"
                    style="width: 25px;" /> <input class="add" name="" type="button"
                    value="+" /></td>
            <td><input type="button" value="加入购物车" onclick="addsuccess(this)"></td>
            </tr>
</c:forEach>
</table>
<script language="javascript">
     //验证元素是否获取到
    /* function addsuccess(btn){
        //var rowIndex = obj.parentElement.rowIndex;
        var tr = btn.parentElement.parentElement;
        var td = tr.cells[0];
       // alert(td.innerHTML);
       alert(td.children[0].value);
    } */
    //获取数据并提交
     function addsuccess(btn){
        var users_id = document.getElementById("users_id").value;
        var tr = btn.parentElement.parentElement;
        //var tr = btn.parent.parent;
        var item_id = tr.cells[0].children[0].value;
        var item_name = tr.cells[1].children[0].value;
        var item_price = tr.cells[2].children[0].value;
        var count = tr.cells[4].children[1].value;
        //alert(item_id+"+"+item_name+"+"+item_price+"+"+count);
        if(count > 0){
             $.post("${pageContext.request.contextPath }/addItems.do" ,
                     {users_id:users_id,item_id:item_id,item_name:item_name,item_price:item_price,count:count},
                     function(msg){
                if(msg == "加入购物车成功"){
                    //num.setAttribute("value", 0);
                    var msg1 = "商品"+item_id+msg;
                    alert(msg1);
                    tr.cells[4].children[1].value = 0;
                }else{
                    alert(msg);
                }
            }); 
              /* this.document.addItem.action = "${pageContext.request.contextPath }/addItems.do";
            document.addItem.submit();
            alert("加入购物车成功");
            num.setAttribute("value", 0);   */
        }else{
            alert("商品数量不能为0!");
        }
    }   
    //商品数量的加减
    $(document).ready(function() {
        //加的效果
        $(".add").click(function() {
            var n = $(this).prev().val();
            var num = parseInt(n) + 1;
            if (num == -1) {
                return;
            }
            $(this).prev().val(num);
        });
        //减的效果
        $(".min").click(function() {
            var n = $(this).next().val();
            var num = parseInt(n) - 1;
            if (num == -1) {
                return
            }
            $(this).next().val(num);
        });
    })
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值