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
阅读全文
1 0
- ajax追加表格
- Ajax之追加到表格
- jsf追加表格
- angular+表格追加
- js动态表格追加行
- 追加数据到excel表格
- javascript 自动追加和删除表格行
- H5使用js追加表格进行操作
- ajax+css表格
- ajax+css表格
- 表格美化代码ajax
- JQuery ajax 删除表格
- 利用ajax画表格
- Ajax表格传值
- 使用JavaScript动态追加表格的行和列
- 用dom追加实现添加表格每一行
- 将输入框的内容追加到表格中
- jQuery实现用户添加删除,符合条件追加到表格
- 给 Scrapy 爬虫项目设置防反爬
- windows 7 下VS2013编译Ceres,含suitesparse的部分
- 处理 NumPy 矩阵和 ufunc
- pos机开发相关
- day02 uboot、程序的烧写
- ajax追加表格
- git碰到 NO path specified. See 'man git-pull' for valid url syntax错误
- CSS Grid布局(3)
- 1009. Product of Polynomials (25)
- 自定义View总结(一)
- 自顶向下深入分析Netty(八)--CodecHandler
- 如何去掉debug是讨厌的错误提示对话框
- 记一次踩坑|空table应该编码为数组还是对象
- day03 LED灯源程序编写与编译、UART原理