ajax追加表格

最新推荐文章于 2022-04-03 07:36:28 发布

原创最新推荐文章于 2022-04-03 07:36:28 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #html #异步 #json

笔记本专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何利用jQuery和AJAX实现不刷新页面的情况下向HTML表格动态追加一行数据。通过用户输入的商品ID和数量，后台查询相应信息并返回JSON格式数据，前端解析后动态插入到指定表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单的追加表格，使用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