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" ></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");
}
});
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持亿速云。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
