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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM