Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何提示模式询问用户是否要删除选中的行?(jQuery)

如何提示模式询问用户是否要删除选中的行?(jQuery)
EN

Stack Overflow用户
提问于 2020-03-06 17:37:14
回答 1查看 137关注 0票数 0

我被要求制作一个程序,它从一个模态中获取输入,并将其放入一个表中。每一行都需要有一个编辑和删除图标(使用FontAwesome)。对于这个问题的上下文,我主要关注删除图标/按钮。目前,删除图标需要是一个按钮,一旦按下该按钮,就会显示一个模式,询问用户是否确定要删除行中的信息。模式将包含两个按钮,让用户可以选择采取两个操作之一,(是按钮-删除行及其所有内容;否按钮-简单地关闭模式)。下面我给出了jQuery代码(需要用jQuery编写),到目前为止,我的代码将图标显示为按钮,一旦单击删除图标/按钮,该行就会被删除,但只有在那时才会显示模式。(目前,该模式没有功能,即。这些按钮不做任何事情)。

jQuery:

代码语言:javascript
运行
AI代码解释
复制
function deleteData(btnDelete) {
  $(btnDelete).parents("tr").remove();
}

function openModal() {
  $('#modalDelete').show();
}

//function that adds input values to the table
function addToTable() {
  //add tbody tag if one is not present
  if($("#inputTable tBody").length == 0) {
    $("#inputTable").append("<tbody></tbody>");
  }

  $(function() {
    $('#insertImage').on('change', function()
    {
      var filePath = $(this).val();
      console.log(filePath);
    });
  });

  //append inputs to the Table
  $("#inputTable tbody").append(
    "<tr>" +
      "<td>" +  + "</td>" +
      "<td>" + $("#addName").val() + "</td>" +
      "<td>" + $("#addSurname").val() + "</td>" +
      "<td>" +
        "<button type='button' " +
          "class='btn'><i class='fas fa-user-edit' id='pencilIcon'></i></button>" +
      "<td>" +
        "<button type='button' " +
          "onclick='deleteData(this); openModal();'" +
          "class='btn'><i class='fas fa-dumpster' id='dumpsterIcon'></i></button>" +
        "</button>" +
      "</td>" +
    "</tr>"
  );


}

//add the inputed content to the table
$("#addToTable").click(function(){
  addToTable();
});

HTML (表格):

代码语言:javascript
运行
AI代码解释
复制
  <div class="modal fade" id="addDataToTable" tabindex="-1" role="dialog" aria-labelledby="website" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Add Data to Table</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form class="" action="index.html" method="post">
            <form>
              <div class="form-group">
                <label for="insertImage">Insert Image</label>
                <input type="file" class="form-control-file" id="InsertImage" accept="image/x-png,image/gif,image/jpeg" aria-describedby="inputHelp">
              </div>
              <div class="form-group">
                <label for="addName">Name</label>
                <input type="text" class="form-control" id="addName">
              </div>
              <div class="form-group">
                <label for="addSurname">Surname</label>
                <input type="text" class="form-control" id="addSurname">
              </div>
            </form>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" id="addToTable">Add to Table</button>
        </div>
      </div>
    </div>
  </div>

HTML (删除模式):

代码语言:javascript
运行
AI代码解释
复制
  <div class="modal" tabindex="-1" role="dialog" id="modalDelete">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Are you sure you want to delete?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Yes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
      </div>
    </div>
  </div>
</div>

任何帮助都将不胜感激!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-03-06 17:52:10

这是一个纯javascript的解决方案:

代码语言:javascript
运行
AI代码解释
复制
var delete = confirm("Are you sure you want to delete this row?");
if (delete ) { 
  //code to delete
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60569056

复制
相关文章
更改WordPress Gutenberg编辑器的宽度
要更改WordPress Gutenberg编辑器的宽度,您需要为其加载自定义CSS规则。以下是如何快速更改宽度的概述,包括加载样式表和添加将增加Gutenberg编辑器内容区域宽度的特定规则。
许都博客
2021/06/16
8620
WordPress 5.0 代码禁用Gutenberg编辑器
在WP升级至5.0版本之后,其中内置并强制启用了新的Gutenberg编辑器(在WP5.0中准确地说应该叫block editor编辑器),据说编辑功能更加强大高效,但是我的需求就是写几行文字加几张图片,新编辑器非常的不友好。
空木白博客
2019/04/23
6590
WordPress 5.0 发布,新增基于「块」的编辑器 Gutenberg
WordPress 5.0 终于发布,该版本最大的更新就是编辑器,正式引入新的基于块(block-based)的编辑器:Gutenberg,它可以给用户提供更简化的编辑体验。无论是首次构建网站、修改博客还是编写代码,用户都可以更灵活地显示内容。
Denis
2023/04/14
4910
WordPress 5.0 发布,新增基于「块」的编辑器 Gutenberg
WordPress 4.9.8 发布,你可以开始尝试最新的编辑器 Gutenberg
WordPress 发布了 4.9.8 这个修订版,这个版本除了修正了 46 个bug和其他一些功能增强之外,最重要的就是 “Try Gutenberg” 的功能,让你可以开始尝试 WordPress 新一代的编辑 Gutenberg:
Denis
2023/04/14
3380
WordPress 4.9.8 发布,你可以开始尝试最新的编辑器 Gutenberg
WordPress禁用古腾堡(Gutenberg)使用经典的编辑器
很多人在使用 WordPress 最新的 Gutenberg 编辑器时都觉得并不适应,很难上手,毕竟新的事物要是需要时间才能熟悉。如果不想用还是可以很方便禁用Gutenberg编辑器,来使用经典编辑器。
.T.
2022/02/22
1.5K0
WordPress 5.0默认老版编辑器
有很多专栏作者用户,可能他们使用编辑器的习惯不同,那么他们的选择也是不同的。如果要为某些特定用户和文章类型禁用Gutenberg ,那么,这个插件会很有效。插件下载Disable Gutenberg首先需要安装并启用Disable Gutenberg插件,然后对插件进行设置,点击设置 禁用Gutenberg,保存即可。默认情况下,该插件会为网站上的所有用户禁用Gutenberg。但如果要为某些特定用户和文章类型禁用,则需要取消选中完全禁用选项。取消后将显示更多选项,以便为某些用户,文章类型,主题模板或单个文章有选择性的禁用Gutenberg。如果发现正在使用的WordPress插件与Gutenberg不兼容,而你又希望网站上其他区域可以使用Gutenberg,这款插件正好可以满足。方法3一句代码禁用Gutenberg古腾堡 编辑器其实之前经典的Classic Editor编辑器代码,在WordPress 50并没有被删除,上述插件也只是个切换开关而已。关键代码就一句 addfilteruseblockeditorforpost,returnfalse将代码添加到当前主题函数模板functionsphp中,即可切换回之前的编辑器,根本不需要那些插件。当然你想有更多的选择性,可以安装上述插件。后台禁用block editor编辑器后,前端还是会加载相关的的样式文件,还需要加上一句 removeactionwpenqueuescripts,wpcommonblockscriptsandstyles禁止前端加载样式文件。Classic Editor编辑器代码据WP官方称会延续集成到2021年才会从程序中彻底删除,但大家也不用担心,到时会有全套的Classic Editor编辑器插件让你选择。另外,完整中文版估计遥遥无期,目前50版完全可以用之前的语言文件,除了新编辑器没有汉化,其它没有影响。
爱游博客
2019/08/07
1.3K0
WordPress 5.0默认老版编辑器
神级WordPress主题框架Genesis 2.8发布:容易引起极大舒适感
根本毛病在哪呢?那是因为,当你安装了一个新主题时,这个主题的演示内容不会自动导入进来(译注:这就好比方便面包装上的图,“图片仅供参考”)。这就导致用户需要在文档中摸索如何导入演示内容,很容易让人崩溃,也会招致用户的吐槽,甚至很多时候用户就完全放弃了WordPress。
丘壑
2019/03/13
2.1K0
WordPress 禁用 Rest API 默认路由兼容古腾堡 Gutenberg 编辑器
禁用 WordPress Rest API 默认路由后有利于 WordPress 站点安全及避免暴露网站所有内容,所有子凡的所有 WordPress 网站都是直接禁用了 WordPress 默认路由的,但是由于 WordPress 默认使用块编辑器(古腾堡 Gutenberg),所有如果直接使用代码禁用 WordPress Rest API 默认路由就会导致后台编辑器无法正常使用。
张子凡
2022/11/02
7390
WordPress 禁用 Rest API 默认路由兼容古腾堡 Gutenberg 编辑器
免费开源的Argon主题,一个轻盈、简洁的 WordPress 主题
主题介绍 轻盈美观 - 使用 Argon Design System 前端框架,细节精致,轻盈美观 高度可定制化 - 可自定义主题色、布局(双栏/单栏/三栏)、顶栏、侧栏、Banner、背景图、日夜间模式不同背景、背景沉浸、浮动操作按钮等,提供了丰富的自定义选项 夜间模式 - 支持日间、夜间、纯黑三种模式,并可以根据时间自动切换或跟随系统夜间模式 功能繁多 - Tag 和分类统计、作者链接、额外链接、文章字数和预计阅读时间、文章过时信息显示 Pjax - 支持 Pjax 无刷新加载,提高浏览体验 友情链接
Hello-1
2022/08/30
1.6K0
免费开源的Argon主题,一个轻盈、简洁的 WordPress 主题
8个用于设计漂亮表格的WordPress插件
在WordPress中作为内容管理工具的一个好处是,几乎所有文字处理软件能做的事情(例如文本格式,布局格式,嵌入图像等等)都可以在WordPress编辑器中完成,但比较欠缺的一种功能是表格设计。
丘壑
2019/04/09
5.1K0
8个用于设计漂亮表格的WordPress插件
Admin Dark Mode:深色模式的WordPress管理后台
2018年苹果正式发布了新一代的 macOS 11.14 ,代号为「Mojave」, 引入了系统级的深色模式,这是一种较深的配色方案,有益于眼睛且有助于专注开展工作的全新外观。颇受用户尤其是码农的欢迎。我本人也是很喜欢的。
丘壑
2019/04/18
1.3K0
Admin Dark Mode:深色模式的WordPress管理后台
WordPress 4.9.8版本正式发布,修复了46个问题
从 WordPress 4.9.8 发布文章:此维护版本修复了 46 个错误(详情参见发行注记),增强功能和祝福任务,包括更新 Twenty Seventeen 捆绑主题。
明月登楼的博客
2019/05/15
1.3K0
WordPress 4.9.8版本正式发布,修复了46个问题
自定义 WordPress 样式
修改页面头部、脚部的文件路径:wp-content ——》themes ——》twentyten ——》footer.php、header.php
阳光岛主
2019/02/19
1.6K0
自定义 WordPress 样式
展望 WordPress 5.0 会给我们带来哪些更新?
目前 WordPress 最后的一个正式版已经到 4.9.7 了, WordPress 5.0 也即将到来了,那么 WordPress 5.0 会给我们带来哪些更新呢?
明月登楼
2018/07/30
1.4K0
展望 WordPress 5.0 会给我们带来哪些更新?
WordPress短代码怎么在当前文章内引用评论
评论列表可以是整个博客或着一篇文章,支持的参数也有很多,比如post_id、user_id等等,自带排序
沈唁
2019/05/21
8830
WordPress自定义美化
IE支持cur,ani,ico这三种格式,FF支持bmp,gif,jpg,cur,ico这几种格式,不支持ani格式,也不支持gif动画格式,因此来说一般将url引用的图片存为ico或cur格式比较好!
taoli
2022/09/27
3330
wordpress自定义鼠标样式
给出两个鼠标样式: https://www.wnag.com.cn/wp-content/uploads/2020/02/cursor_1.png https://www.wnag.com.cn/wp-content/uploads/2020/02/cursor_2.png
可定
2020/04/20
1.2K0
WordPress 技巧:在 WordPress 后台隐藏自定义字段
如果你想在写博客的时候保持日志编辑页面尽量的简洁,你可以通过下面的代码把 WordPress 自定义字段隐藏起来。在你主题的 functions.php 文件中添加以下代码:
Denis
2023/04/14
6060
WordPress 技巧:在 WordPress 后台隐藏自定义字段
WordPress 技巧:使用页面模板自定义 WordPress 页面
默认情况下 WordPress 是使用 page.php 来处理所有页面的外观的话,但是 WordPress 提供了页面模板的机制让 WordPress 开发者可以自定义 WordPress 每个页面的外观和布局。
Denis
2023/04/15
1.3K0
点击加载更多

相似问题

获取不带参数的URL路径

13

获取不带预设参数的整个url

10

从不带$_GET的URL中获取参数

20

从不带URL参数的HTML src标记中获取URL

116

WP获取不带参数的当前类别URL

40
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文