java获取table数据_基于jQuery获取table数据发送到后端

本文介绍如何在JavaScript中通过jQuery动态创建表格,并在用户点击保存时,获取表格中的所有行数据,以POST方式通过AJAX发送到Java后端。示例代码包括添加、删除表格行的功能,以及保存数据时的处理逻辑。

1.我做的是一个动态表格,就是在输入框里每输入一次数据并点击“添加”按钮,表格中就会新增一行记录。

获奖记录表
编号奖项名称获奖年份操作

//添加

//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 += "

\n" +

"

" + pid + "\n" +

"

" + pname + "\n" +

"

" + pyear + "\n" +

"

删除\n" +

"

";

};

//删除

//编写删除方法

function delTr(obj) {

//获取表格

var table = obj.parentNode.parentNode.parentNode;

//获取tr

var tr = obj.parentNode.parentNode;

//删除tr

table.removeChild(tr);

}

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");

}

});

})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值