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 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
javascript for循环设法提高性能
Feb 24 Javascript
php与js的区别是什么
Aug 05 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
Oct 14 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
解析vue中的$mount
Dec 21 Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
OpenLayers3实现对地图的基本操作
Sep 28 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
实用函数7
2007/11/08 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
JS实现密码框效果
2020/09/10 Javascript
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
Python探索之修改Python搜索路径
2017/10/25 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
python实现简单成绩录入系统
2019/09/19 Python
详解python中eval函数的作用
2019/10/22 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
耐克中国官方商城:Nike中国
2018/10/18 全球购物
装修致歉信
2014/01/15 职场文书
适用于所有创业者的创业计划书
2014/02/05 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
绘画专业自荐信
2014/07/04 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
运动会闭幕词
2015/01/28 职场文书
创业计划书之酒店
2019/08/30 职场文书
MySQL 如何限制一张表的记录数
2021/09/14 MySQL
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server