JQuery动态添加表格,然后动态删除不成功问题
背景:
自己做了一个测试网页,想动态添加表格,然后删除,按照网上的教程写完,发现点击"删除参数"按钮没用
源码:
function addtr() {
var trinfo = "<tr><td><input placeholder='参数名称' style='width: 80%'></td>" +
"<td><input placeholder='参数值' style='width: 70%'><button id='delete-btn' onclick='removetr(event)'>删除参数</button></td></tr>";
$("#keytable").append(trinfo);
} function removetr() {
$(this).parents("tr").empty();
}
问题现象:
不能删除
问题原因:
选择器没有选到元素,用console.log抓取获取到的元素发现是全局windows
解决方法:
提供两种方法
方法一:利用event点击事件
function addtr() {
var trinfo = "<tr><td><input placeholder='参数名称' style='width: 80%'></td>" +
"<td><input placeholder='参数值' style='width: 70%'><button id='delete-btn' onclick='removetr(event)'>删除参数</button></td></tr>";
$("#keytable").append(trinfo);
} function removetr(ev) {
$(ev.target).parents("tr").empty();
}
方法二:利用监听on功能
function addtr() {
var trinfo = "<tr><td><input placeholder='参数名称' style='width: 80%'></td>" +
"<td><input placeholder='参数值' style='width: 70%'><button id='delete-btn' onclick='removetr()'>删除参数</button></td></tr>";
$("#keytable").append(trinfo);
} $(function () {
$(document).on("click", "#delete-btn", function () {
$(this).parents('tr').empty()
});
});
JQuery动态添加表格,然后动态删除不成功问题的更多相关文章
- jquery 动态添加表格行
jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...
- Quartz动态添加,修改,删除任务(暂停,任务状态,恢复,最近触发时间)
首页 博客 学院 下载 图文课 论坛 APP 问答 商城 VIP会员 活动 招聘 ITeye GitChat 写博客 小程序 消息 登录注册 关闭 quartz_Cron表达式一分钟教程 09-05 ...
- javascript里面的数组,json对象,动态添加,修改,删除示例
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Quartz动态添加、修改和删除定时任务
任务调度开源框架Quartz动态添加.修改和删除定时任务 Quartz 是个开源的作业调度框架,为在 Java 应用程序中进行作业调度提供了简单却强大的机制.Quartz框架包含了调度器监听.作业和触 ...
- ASP.NET网页动态添加、更新或删除数据行
ASP.NET网页动态添加.更新或删除数据行 看过此篇<ASP.NET网页动态添加数据行> http://www.cnblogs.com/insus/p/3247935.html的网友,也 ...
- Quartz 2.2 动态添加、修改和删除定时任务
QuartzManager.Java 动态添加.修改和删除定时任务管理类 import org.quartz.CronScheduleBuilder; import org.quartz.CronTr ...
- 转: javascript动态添加、修改、删除对象的属性和方法
在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为, ...
- Quartz 2.3 动态添加、修改和删除定时任务
下面直接上代码: <dependency> <groupId>org.quartz-scheduler</groupId> <artifactId>qu ...
- javascript动态添加、修改、删除对象的属性与方法
在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为, ...
随机推荐
- 基于bootstrap_后台管理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- flask-本地线程-请求上下文补充
context(上下文)是flask里面非常好的设计,使用flask需要非常理解应用上下文和请求上下文这两个概念 本地线程 本地线程(thread local)希望不同的线程对于内容的修改只在线程内部 ...
- git常用知识笔记
学习资料: http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 http://codi ...
- 初识跨终端Web
近期试读了<跨终端Web>这本书的部分章节,既为了拿到书,也为了记录下读后的收获的东西,这会是个非常好的习惯吧. 标题为"初识跨终端Web".对我来说最贴切了,在此之前 ...
- A toolbox to build your own build server
A toolbox to build your own build server LambdaCD - Build Pipelines as Code https://www.lambda.cd/ A ...
- gitlab merge过程
基本步骤如下: 以我的分支为例 1.创建本地分支,命令 git checkout -b liuping_develop2.创建好分支后提交到远程 ,命令 git push origin liuping ...
- java和jar命令
IDEA打可运行jar http://bglmmz.iteye.com/blog/2058785 -jar参数运行应用时classpath的设置方法 你是否在使用java -jar参数运行打包好的ja ...
- 哈希表---线性探测再散列(hash)
//哈希表---线性探测再散列 #include <iostream> #include <string> #include <stdio.h> #include ...
- xunit输出output到控制台
1.https://xunit.github.io/docs/capturing-output 里面似乎提到2个方法,第二个方法还需要在配置文件中添加appSetting 这里采用第一种方法, 1.添 ...
- Why is an 'Any CPU' application running as x86 on a x64 machine?
It's likely that you linked some assemblies that are not Any CPU, but include native code (or are ...