您好,登錄后才能下訂單哦!
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進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。