jq 点编辑出现input框可进行编辑，出现保存和取消

来源：互联网发布：真牛皮包淘宝网编辑：程序博客网时间：2024/06/05 13:42

首先是效果图

下面是html前台的布局代码

再是jq的代码

 <script>        //页面加载时将input框和保存和取消隐藏        $(document).ready(function(){            $("input[name='xs1']").hide();            $("input[name='xs2']").hide();            $("span[class='edit']").hide();        });        //点击编辑显示input框，隐藏编辑，显示保存和取消        $(function(){            $("a[rel='edit']").click(function () {                $(this).parent().parent().parent().find("input[name='xs1']").show();                $(this).parent().parent().parent().find("input[name='xs2']").show();                $(this).parent().parent().parent().find("span[class='xst1']").hide();                $(this).parent().parent().parent().find("span[class='xst2']").hide();                $(this).hide();                $(this).parent().parent().find("span[class='edit']").show();            })        });        //点击保存后获取input框的值，用ajax发送到后台进行数据库更改操作        $(function () {            $("a[rel='update']").click(function () {                var xs1 = $(this).parent().parent().parent().find("input[name='xs1']").val();                var xs2 = $(this).parent().parent().parent().find("input[name='xs2']").val();                var id = $(this).parent().parent().parent().find("input[name='id']").val();//                var $this = $(this);                $.ajax({                    type: "post",                    url: "{:U('Mediasetdwjxswh/update')}",                    data: { id: id, xs1: xs1,xs2:xs2},                }).done(function (data) {                    if (data == "1") {                        alert("保存成功！");                        window.location.reload();                    }                    else                        alert("保存失败！");                });            })        });        //点击取消将input框隐藏和保存和取消隐藏，将编辑显示出来        $(function () {            $("a[rel='cancel']").click(function () {                $(this).parent().parent().parent().find("input[name='xs1']").hide();                $(this).parent().parent().parent().find("input[name='xs2']").hide();                $(this).parent().parent().parent().find("span[class='xst1']").show();                $(this).parent().parent().parent().find("span[class='xst2']").show();                $(this).parent().parent().find("span[class='edit']").hide();                $(this).parent().parent().find("a[rel='edit']").show();            })        });    </script>

每个方法是起什么作用都已经添加上了注释哦！

1 0