zoukankan      html  css  js  c++  java
  • 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>
    " +
                        "                <td>" + pid + "</td>
    " +
                        "                <td>" + pname + "</td>
    " +
                        "                <td>" + pyear + "</td>
    " +
                        "                <td><a class="del_a" href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    " +
                        "            </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"); } }); })
  • 相关阅读:
    X 如何在mysql客户端即mysql提示符下执行操作系统命令
    X MySQL UNDO表空间独立和截断 ,mysql undo 的历史
    X Mysql5.7忘记root密码及mysql5.7修改root密码的方法
    X mysql密码的安全策略ERROR 1819 (HY000): Your password does not satisfy the current policy requirements
    二分法查找
    elasticsearch API
    logstash的基础
    elasticsearch的基础
    Linux的进程管理
    Linux的网卡配置
  • 原文地址:https://www.cnblogs.com/iceywu/p/12331842.html
Copyright © 2011-2022 走看看