基于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>
jquery实现ajax
<th>操作</th>
</tr>
</table>
<input type="button" id="save_3" value="保存">
<span id="save_res" ></span>
<script>
//添加
//1.获取按钮
var ele_add = ElementById("btn_add");
//2.绑定事件
lick = function () {
//3.获取输⼊框内容，注意得到元素要继续获取value才是内容
var pid = ElementById("pid").value;
var pname = ElementById("pname").value;
var pyear = ElementById("pyear").value;
/
/4.获取表格，注意得到的是数组，要加上索引才是表格元素
var ele_table = ElementsByTagName("table")[0];
ele_table.innerHTML += "<tr>\n" +
"        <td>" + pid + "</td>\n" +
"        <td>" + pname + "</td>\n" +
"        <td>" + pyear + "</td>\n" +
"        <td><a class=\"del_a\" href=\"javascript:void(0);\" onclick=\"delTr(this);\">删除</a></td>\n" +
"      </tr>";
};
//删除
//编写删除⽅法
function delTr(obj) {
//获取表格
var table = obj.parentNode.parentNode.parentNode;
//获取tr
var tr = obj.parentNode.parentNode;
//删除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 = "localhost/suiningAdmissions/category4_5.html";
// alert("保存成功！")
} else {
//注册失败
$("#errorMsg").Msg);
}
},"json");
}
});
})
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。