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