没有合适的资源?快使用搜索试试~ 我知道了~
首页基于jQuery获取table数据发送到后端
资源详情
资源评论
资源推荐
基于基于jQuery获取获取table数据发送到后端数据发送到后端
主要介绍了基于jQuery获取table数据发送到后端,文中通过示例代码介绍的非常详细,对大家的学习或者工作具
有一定的参考学习价值,需要的朋友可以参考下
1.我做的是一个动态表格,就是在输入框里每输入一次数据并点击我做的是一个动态表格,就是在输入框里每输入一次数据并点击“添加添加”按钮,表格中就会新增一行记录。按钮,表格中就会新增一行记录。
<table id="stu_prize_tab" class="stu_prize_tab" border="1px solid" cellspacing="0" cellpadding="0">
<caption class="prize_title">获奖记录表</caption>
<tr>
<th>编号</th>
<th>奖项名称</th>
<th>获奖年份</th>
<th>操作</th>
</tr>
</table>
<input type="button" id="save_3" value="保存">
<span id="save_res" style="color: red;font-size: large"></span>
<script>
//添加
//1.获取按钮
var ele_add = document.getElementById("btn_add");
//2.绑定事件
ele_add.onclick = function () {
//3.获取输入框内容,注意得到元素要继续获取value才是内容
var pid = document.getElementById("pid").value;
var pname = document.getElementById("pname").value;
var pyear = document.getElementById("pyear").value;
//4.获取表格,注意得到的是数组,要加上索引才是表格元素
var ele_table = document.getElementsByTagName("table")[0];
ele_table.innerHTML += "<tr>" +
" <td>" + pid + "</td>" +
" <td>" + pname + "</td>" +
" <td>" + pyear + "</td>" +
" <td><a class=\"del_a\" href=\"javascript:void(0);\" onclick=\"delTr(this);\">删除</a></td>" +
" </tr>";
};
//删除
//编写删除方法
function delTr(obj) {
//获取表格
var table = obj.parentNode.parentNode.parentNode;
//获取tr
var tr = obj.parentNode.parentNode;
//删除tr
table.removeChild(tr);
}
</script>
2.给给“保存保存”按钮添加点击事件,点击按钮之后,获取每一行的数据并以参数的形式发送按钮添加点击事件,点击按钮之后,获取每一行的数据并以参数的形式发送ajax的的post请求。请求。
$(function () {
$("#save_3").click(function () {//一条一条加入记录
var trList = $("#stu_prize_tab").find("tr");
//表头不用,所以i从1开始
for (var i = 1; i < trList.length; i++) {
var trArr=trList.eq(i);
var pno = trArr.children("td").eq(0).text();//获奖编号
var pname = trArr.children("td").eq(1).text();//获奖名称
var pyear = trArr.children("td").eq(2).text();// 获奖年份
$.post("stuPrizeServlet",{pno:pno,pname:pname,pyear:pyear}, function (data) {
//处理服务器响应的数据data flag:true errorMsg:注册成功
if (data.flag) {
//如果注册成功,跳转到成功页面
$("#save_res").html("保存成功!");
// location.href = "http://localhost/suiningAdmissions/category4_5.html";
// alert("保存成功!")
} else {
//注册失败
$("#errorMsg").html(data.errorMsg);
}
},"json");
}
});
})
weixin_38722588
- 粉丝: 6
- 资源: 839
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- zigbee-cluster-library-specification
- JSBSim Reference Manual
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论5