JavaScript怎样在删除前添加确认弹出框?


Posted in Javascript onMay 27, 2019

一,【前言】

最近架构组开发的”异常监控平台”,虽说是公司内部基础研发部业务组上百人用的一个系统,但是对一下体验度的提升还是要的,例如,删除是直接删除还是删除之前有一个确认弹出框比较好呢?

答案当然是有确认提示框好,这样可以避免误删.

JavaScript怎样在删除前添加确认弹出框?

二,【详情】 

1,思考方法:

可以添加 js, 或添加一个 function 用一个Ajax.

2,现在情况:

原代码删除是 HTML表单形式,调接口的方式;  网上查了一般都是 onclick方式,这怎么办?

JavaScript怎样在删除前添加确认弹出框?

3,本次解决方案:

(1)  更改 href=”” 换成 onclick=”function()” 触发.

JavaScript怎样在删除前添加确认弹出框?

(2)  onclick=”function()”中 function() 实现:

 JavaScript怎样在删除前添加确认弹出框?

(3)  优化后代码如下:

onclick 代码:

var delHtml = '<a name="trash"style="cursor: pointer" class="glyphicon glyphicon-trash"title="删除" onclick="confirmDel('+id+')"></a>';

function 函数如下 :

functionconfirmDel( id) {
var r=confirm("您确定要删除?")
if (r==true)
{
$.post("/alcf/del",{id:id},function (result) {
window.location.reload();
})
}else {return;}
}

三,【小结】     

圣人有曰:”不怕不知道,就怕不知道!”,先查询,先去实践,在去更改和优化,第一次不一定能做到至善至美,但是一定要去先实践, 多交流,多沟通, 先站在巨人的肩膀上去成长!

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

Javascript 相关文章推荐
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
判断横屏竖屏(三种)
Feb 13 Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
vue项目前端错误收集之sentry教程详解
May 27 #Javascript
了解javascript中变量及函数的提升
May 27 #Javascript
基于vue实现一个禅道主页拖拽效果
May 27 #Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 #jQuery
初学node.js中实现删除用户路由
May 27 #Javascript
jquery实现动态创建form并提交的方法示例
May 27 #jQuery
jquery实现动态改变css样式的方法分析
May 27 #jQuery
You might like
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
php取得字符串首字母的方法
2015/03/25 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
JS实现带阴历的日历功能详解
2019/01/24 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
从零学Python之入门(五)缩进和选择
2014/05/27 Python
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
python os.path模块常用方法实例详解
2018/09/16 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
python实时监控logstash日志代码
2020/04/27 Python
python下对hsv颜色空间进行量化操作
2020/06/04 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
abstract class和interface有什么区别
2013/08/04 面试题
迷你西餐厅创业计划书范文
2013/12/31 职场文书
求职简历中自我评价
2014/01/28 职场文书
老人祝寿主持词
2014/03/28 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python