jquery+ajax+table的一个完整实例,编辑表格后,提交数据到后台,并动态更新表格,附完整的在线实例演示推荐 亲测 原创 收藏

文章标签: jquery table jquery ajax
  • :
  • 06-24 14:40
  • :
  • 129次
  • :
  • 0条
  • 4赞

简介jquery+ajax+table的一个完整实例,在对表格进行编辑后,通过ajax把编辑后的数据提交到网站后台,然后动态的更改前台表格的内容,并且还有完整的在线演示。l

本文和大家分享一个jquery+ajax+table的一个完整实例,在前台对table表格进行编辑后,用ajax把编辑后的数据提交到后台,更新到数据库里,并再动态更改前台表格的内容。

在本文的最后有完整的在线实例演示地址,站长还是习惯一步一步的来教大家如何来实现!!!

假如我们网页里有这样的一个表格:

具体的HTML代码站长就不在这里展示了!

首先我们要实现的就是在点击了编辑按钮后,让表格变成可编辑状态:


站长以前写过一篇文章来介绍这个效果的:jquery实现双击table表格后可编辑内容的方法及在线实例演示

$("table#aijquery").on("click","button.edit",function(){
    var $this=$(this);    //获取被点击的按钮
    var $tr=$this.parents("tr");    //获取当前按钮所在的tr行
    $tr.find("td").not($("td:has(button)")).each(function(){ //获取当前行所有除了含有button的td
        var $td=$(this);
        var _t=$td.text();
        var _w=$td.width();
        var _h=$td.height();
        $td.html("");
        var $input=$("<input type='text' class='border border-primary'>");
        $input.appendTo($td).width(_w).val(_t);
    });
    $this.removeClass().addClass("btn btn-danger btn-sm ajax").text("提交");//更改按钮的样式
});


其次,在点击了提交按钮后,获取编辑后的内容,并提交到网站后台,然后再动态更新表格:

$("table#aijquery").on("click","button.ajax",function(){
    var $this=$(this);
    var $tr=$this.parents("tr");
    
    //获取编辑后的内容,并放入一个数组内
    var v=[];
    $tr.find("td input:text").each(function(){
        v.push($(this).val());
    });
    
    //用jquery里post方法,把数据提交到后台,经过后台处理后,在输出到前台
    $.post("/Html/aijquery/ajax-post/",{"d":v},function(d){
        //获取到经过后台处理的数据,动态更新到前台
        var narray=d.split(",");
        var nhtml="<td>"+narray.join("</td><td>")+"</td>";
        nhtml=nhtml+"<td><button class=\"btn btn-primary btn-sm edit\">编辑</button></td>";
        $tr.html(nhtml);
    });
});

好了,到这里就完成了我们所需要的效果了,在前台编辑表格,然后再用ajax的方法提交到网站的后台,然后再动态的更新前台表格的内容!

这里是站长准备的完整的在线实例演示jquery+table+ajax编辑后提交数据,动态修改表格内容的在线演示



您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-15 10:04:39