前端实现通过A标签点击编辑按钮，即出现确认和取消，点击确认可以提交数据到表单，点击取消，则返回到点击编辑时的值

╰半夏微凉° 2023-10-01 20:40 20阅读 0赞

前端实现通过A标签点击编辑按钮，即出现确认和取消，点击确认可以提交数据到表单，点击取消，则返回到点击编辑时的值

效果如图：

**点击编辑前**  
![在这里插入图片描述][95bbba992813404e8aaa74eb7d690779.png_pic_center]  
**点击编辑后**  
![在这里插入图片描述][39dccec8cae448e69d7c2c043c416ed1.png_pic_center]

**代码如下：**

**html代码**

> 这里主要关键在**id**和**onclick**
> 
> id是在JavaScript中需要用\#去取值
> 
> onlice中为JavaScript中设定的函数

<c:forEach items="${deps}" var="dep">
        <tr>
            <td>${dep.departmentid}</td>
            <td id="depname${dep.departmentid}">${dep.departmentname}</td>
            <td>
                <a class="clickbutton" href="#" id="edit${dep.departmentid}" οnclick="editDep(${dep.departmentid})">编辑</a>
                <a class="clickbutton" style="display: none" href="#" id="cancel${dep.departmentid}" οnclick="cancelDep(${dep.departmentid})">取消</a>
                <a class="clickbutton" href="/admin/deleteDep/${dep.departmentid}">删除</a>
            </td>
        </tr>
    </c:forEach>

**JavaScrip代码：**

> cancelDep为点击取消的效果
> 
> editDep为点击编辑的效果

<script src="${pageContext.request.contextPath}/js/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        var depname;//部门名称的值
        function cancelDep(depid){//depid为html代码传过来的值
            var editBtn=$('#edit'+depid);
            var cancelBtn=$('#cancel'+depid);
            var ele=$('#depname'+depid);
            cancelBtn.css('display','none');
            editBtn.html('编辑');
            ele.html(depname);
        }
        
        function editDep(depid){
            var editBtn=$('#edit'+depid);
            var cancelBtn=$('#cancel'+depid);
            var ele=$('#depname'+depid);
            depname=ele.html();//每次点编辑时保存部门名称的值
            if(cancelBtn.css('display')=='none'){//取消
                cancelBtn.css('display','inline');
                editBtn.html('确定');
                var depName=ele.text();
                ele.html('<input type="text" value="'+depName+'"/>')
            }else{//确定
                var children=ele.children('input');
                var val=children.val();
                $.post('/admin/updateDep',{id:depid,name:val},function (msg){
                    if(msg=='success'){
                        cancelBtn.css('display','none');
                        editBtn.html('编辑');
                        ele.html(val);
                    }
                })
            }
        }
    </script>
     ele.html(val);
                    }
                })
            }
        }
    </script>

[95bbba992813404e8aaa74eb7d690779.png_pic_center]: https://img-blog.csdnimg.cn/95bbba992813404e8aaa74eb7d690779.png#pic_center
[39dccec8cae448e69d7c2c043c416ed1.png_pic_center]: https://img-blog.csdnimg.cn/39dccec8cae448e69d7c2c043c416ed1.png#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，20人围观）

还没有评论，来说两句吧...

相关阅读

相关前端实现通过A标签点击编辑按钮，即出现确认和取消，点击确认可以提交数据到表单，点击取消，则返回到点击编辑时的值

前端实现通过A标签点击编辑按钮，即出现确认和取消，点击确认可以提交数据到表单，点击取消，则返回到点击编辑时的值效果如图：点击编辑前 ![在这里插入图片描述][95b

╰半夏微凉°/ 2023年10月01日 20:40/ 0 赞/ 21 阅读

相关图片点击选中，再点击取消

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图

叁歲伎倆/ 2023年06月18日 04:56/ 0 赞/ 135 阅读

相关 2020-web前端-vue 循环多个标签，点击标签变色，再点击取消，可以同时点击多个

同学，先看一下效果吧！！！！ ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM

╰半夏微凉°/ 2022年12月11日 06:26/ 0 赞/ 267 阅读

相关 elementUI table 点击编辑按钮进行编辑实现示例

![240431188dc58d1bc8d8270657ac1767.gif][] 代码([点击查看示例][Link 1])： <!DOCTYPE html>

曾经终败给现在/ 2022年11月22日 10:21/ 0 赞/ 340 阅读

相关 android做一个对界面控件, 确认点击和取消点击来回切换

最近在写功能的时候，一个控件来回切换不同的样式，因为之前做的比较单一，做的是哪种复选框和单选按钮的，那种控件自带ture和false状态, 现在想做的是一个文本框或者按钮以及

￡神魔★判官ぃ/ 2022年10月26日 03:52/ 0 赞/ 326 阅读

相关点击按钮，生成表单

js： function addrow() \{ var table = document.getElementById("test\_table");

ゝ一纸荒年。/ 2022年07月12日 10:09/ 0 赞/ 379 阅读

相关 js radio点击选中再点击取消

$(function(){ $('input:radio').click(function(){

柔光的暖阳◎/ 2022年06月01日 10:25/ 0 赞/ 586 阅读

相关 jQuery实现radio第一次点击选中第二次点击取消

项目开发需要，直接贴代码在JavaScript中，即可实现对于页面所有的radio实现： // jquery $('input:radio').click

绝地灬酷狼/ 2021年12月23日 16:39/ 0 赞/ 506 阅读

相关 jquery checkbox点击选中，再点击取消选中

if(n==1){ if($("abs1").is(':checked')){ $("abs1"

刺骨的言语ヽ痛彻心扉/ 2021年12月04日 06:39/ 0 赞/ 620 阅读

相关 MessageBox--获知点击确认还是取消？

MessageBox.Show("确认要删除该数据吗？", "注意", MessageBoxButtons.OKCancel) == DialogResult.OK 转载于:

àì夳堔傛蜴生んèń/ 2021年11月22日 03:22/ 0 赞/ 439 阅读