基于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>\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
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");
}
});

})

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

• JS/jQuery实现超简单的Table表格添加,删除行功能示例
• jquery实现自定义树形表格的方法【自定义树形结构table】
• JS拖动选择table里的单元格完整实例【基于jQuery】
• PHP+jQuery实现双击修改table表格功能示例
• jQuery-ui插件sortable实现自由拖动排序
• 使用jQuery给Table动态增加行、清空table的方法
• js与jQuery实现获取table中的数据并拼成json字符串操作示例
• jQuery实现table表格checkbox全选的方法分析
• jQuery+datatables插件实现ajax加载数据与增删改查功能示例
• JQuery实现table中tr上移下移的示例(超简单)