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

})

来源：https://www.cnblogs.com/iceywu/p/12331842.html