ajax追加表格

来源:互联网 发布:淘宝嘉年华妈妈装 编辑:程序博客网 时间:2024/06/18 06:52

简单的追加表格,使用jq,json,异步加载追加一行 tr到表格中,不刷新

HTML:

<form onSubmit="false">            ID:<input id="id" type="text" name="id"/>            数量:<input id="quantity" type="text" name="quantity"/>            <input id="submit" type="button" name="enter" value="确认"/>            <input type="reset" value="清空"/><br/>   //对整个表单的input都清空        </form>        <table id="table" border=1>            <thead>                <th>商品牌子</th>                <th>商品型号</th>                <th>数量</th>                <th>单价</th>                <th>小计</th>            </thead></table>

jq:

$(document).ready(function(){                $("#submit").click(function(){                    var id = $("#id").val();                    var quantity = $("#quantity").val();                    $.ajax({                        url:"enterItem",                        type:"POST",                        data:{"id":id,"quantity":quantity},                        error:function(data){                //后台处理出错                            console.log("操作错误");                        },                        success:function(data){                            dataInfo = JSON.parse(data);                            sum += dataInfo.price*quantity;                            if (!data) {                                alert("没有库存");                            }                            else{                                //新增一个节点,追加到表格                                var table = document.getElementById("table");                                var node = document.createElement("tr");                                node.innerHTML = "<td>"+dataInfo.brand+"</td>"+"<td>"+dataInfo.model+"</td>"+"<td>"+quantity+"</td>"+"<td>"+dataInfo.price+"</td>"+"<td>"+ (dataInfo.price*quantity)+"</td>";                                table.appendChild(node);                            }                        }                    });                }); //#submit.click
原创粉丝点击