基于jQuery获取table数据发送到后端

 更新时间:2020年02月26日 11:57:48   作者:遍唱阳春  
这篇文章主要介绍了基于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");
          }
        });

      })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 携程Apollo(阿波罗)安装部署以及java整合实现

    携程Apollo(阿波罗)安装部署以及java整合实现

    这篇文章主要介绍了携程Apollo(阿波罗)安装部署以及java整合实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 详解SpringBoot自动配置源码

    详解SpringBoot自动配置源码

    今天带大家来分析SpringBoot自动配置源码,文中有非常详细的代码示例,对正在学习java的小伙伴们很有帮助,需要的朋友可以参考下
    2021-06-06
  • java http请求设置代理Proxy的两种常见方法

    java http请求设置代理Proxy的两种常见方法

    代理是一种常见的设计模式,其目的就是为其他对象提供一个代理以控制对某个对象的访问,这篇文章主要给大家介绍了关于java http请求设置代理Proxy的两种常见方法,需要的朋友可以参考下
    2023-11-11
  • 关于Spring框架中异常处理情况浅析

    关于Spring框架中异常处理情况浅析

    最近学习Spring时,认识到Spring异常处理的强大,这篇文章主要给大家介绍了关于Spring框架中异常处理情况的相关资料,通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-08-08
  • Java9新特性Stream流API优化与增强

    Java9新特性Stream流API优化与增强

    这篇文章主要为大家介绍了Java9新特性Stream流API优化与增强的用法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助祝大家多多进步,早日升职加薪
    2022-03-03
  • Spring Data分页与排序的实现方法

    Spring Data分页与排序的实现方法

    这篇文章主要给大家介绍了关于Spring Data分页与排序的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • java的package和import机制原理解析

    java的package和import机制原理解析

    这篇文章主要介绍了java的package和import机制原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-01-01
  • 详解Java线程同步器CountDownLatch

    详解Java线程同步器CountDownLatch

    这篇文章主要介绍了Java线程同步器CountDownLatch的相关资料,帮助大家更好的理解和学习Java,感兴趣的朋友可以了解下
    2020-09-09
  • Java数据类型转换的示例详解

    Java数据类型转换的示例详解

    Java程序中要求参与的计算的数据,必须要保证数据类型的一致性,如果数据类型不一致将发生类型的转换。本文将通过示例详细说说Java中数据类型的转换,感兴趣的可以了解一下
    2022-10-10
  • 详解Spring Boot使用Maven自定义打包方式

    详解Spring Boot使用Maven自定义打包方式

    这篇文章主要介绍了Spring Boot使用Maven自定义打包方式,本文通过多种方式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12

最新评论