jQuery----事件绑定之动态添加、删除table行
在jquery中，给元素绑定事件，本文一共介绍三种方法，运用案例，针对最常用的on()方法，进行事件绑定操作。
事件绑定方法：
①$(element).bind()
参数：{ “事件名称1”：function( ){ } ，“事件名称2”：function（）{ }，......}
例如给类名为one的div绑定鼠标点击和鼠标滑入、鼠标滑出事件
$( "div.one").bind( { "click"：function（）{}，“mouseover”：function（）{}，“mouseout”：function(){} })；
②父级元素.delegate()
参数1：子级元素
参数2：事件名称
参数3：事件处理函数
③父级元素.on()
参数1：事件名称
参数2：子级元素
参数3：事件处理函数
示例如下：
分析：点击“添加数据”按钮，弹出“添加数据”对话框，输入课程名字和所属学院，点击“添加”按钮，将输入的课程名称和所属学院添加至表格中，同时，点击“GET”，删除“GET”所在行
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0px;
height: 0px;
} /* 遮盖层 */
.cover {
width: 100%;
height: 100%;
background-color: black;
/* 注意：要想宽高100%覆盖，必须脱离文档流 */
position: absolute;
top: 0px;
left: 0px;
opacity: 0.1;
display: none;
} /* 表单层 */
.form {
height: 294px;
width: 424px;
background-color: white;
border: 1px solid lightgray;
margin-left: -212px;
margin-top: -140px;
display: none;
position: absolute;
left: 50%;
top: 50%;
} /* 表单层头部 */
.form .header {
height: 60px;
background-color: #F7F7F7;
line-height: 48px;
text-indent: 0.5em;
} .form .header span {
color: #666666;
font-weight: bold;
} .header a{
position: relative;
left: 321px;
text-decoration: none;
color: black;
font-weight: 400;
font-size: 30px;
top: 4px;
} /* 表单层主体 */
.body {
height: 173px;
padding-top: 35px;
} .body div {
height: 36px;
line-height: 36px;
text-indent: 10px;
margin-bottom: 35px;
} .body div input {
height: 36px;
width: 300px;
} .add {
text-align: center;
} #btnAdd {
height: 36px;
width: 170px;
} /* 原始层 */
.original{
height: 234px;
width: 369px;
margin: 200px auto; }
/* 添加数据按钮 */
.original input{
height: 32px;
width: 112px;
font-weight: bold;
line-height: 32px;
font-size: 17px;
}
table{
width: 100%;
border-collapse: collapse;
}
thead{
height: 50px;
background-color: #0099CC;
color: white;
}
tr{
height: 42px;
line-height: 42px;
}
th,td{
border: 1px solid #D0D0D0;
text-align: center;
}
tbody{
color: #404060;
font-size: 10px;
background-color: #F0F0F0;
}
.get{
color: #0050EF;
}
</style>
<script src="jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//点击添加数据,弹出表单层和遮盖层
$("#btnAddData").on("click",function(){
$(".cover").show();
$(".form").show();
});
//点击"×",隐藏表单层和遮盖层
$(".header a").on("click",function(){
$(".cover").hide();
$(".form").hide();
});
//点击"添加"按钮,给表格中添加数据
$("#btnAdd").on("click",function(){
var tr=$("<tr></tr>");
var item=[];
item[0]=$(".course input").val();
item[1]=$(".academy input").val();
item[2]="GET";
for(var i=0;i<3;i++){
var td=$("<td></td>");
td.text(item[i]);
tr.append(td);
if(i==2){
td.addClass("get");
}
}
$("tbody").append(tr);
});
//点击"GET",删除所在行
$("tbody").on("click",".get",function(){
$(this).parent().remove();
})
});
</script>
</head>
<body>
<!-- 遮盖层 -->
<div class="cover"></div> <!-- 表单层 -->
<div class="form">
<!-- 表单层头部 -->
<div class="header">
<span>添加数据</span>
<a href="javascrit:void(0)">×</a>
</div>
<!-- 表单层主体 -->
<div class="body">
<!-- 课程名称 -->
<div class="course">
<span>课程名字：</span><input type="text" id="" placeholder="请输入课程名称" />
</div>
<!-- 所属学院 -->
<div class="academy">
<span>所属学院：</span><input type="text" id="" value="传智播客-前端与移动开发学院" />
</div>
<!-- 添加按钮 -->
<div class="add">
<input type="button" id="btnAdd" value="添加" />
</div>
</div>
</div> <!-- 原始层 -->
<div class="original">
<input type="button" id="btnAddData" value="添加数据" /> <table cellspacing="0" cellpadding="0">
<!-- 表格头部 -->
<thead>
<tr>
<th>课程名称</th>
<th>所属学院</th>
<th>已学会</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td>JavaScript</td>
<td>传智播客-前端与移动开发学院</td>
<td class="get">GET</td>
</tr> <tr>
<td>css</td>
<td>传智播客-前端与移动开发学院</td>
<td class="get">GET</td>
</tr> <tr>
<td>html</td>
<td>传智播客-前端与移动开发学院</td>
<td class="get">GET</td>
</tr> <tr>
<td>jQuery</td>
<td>传智播客-前端与移动开发学院</td>
<td class="get">GET</td>
</tr> </tbody>
</table>
</div>
</body>
</html>
注意：
网页结构布局
在给”GET“绑定点击事件，注意从父级元素开始给子级元素绑定事件，否则点击事件会出现bug
jQuery----事件绑定之动态添加、删除table行的更多相关文章
- Js实现动态添加删除Table行示例
<table cellpadding="0" cellspacing="0" border="1" style="margi ...
- C# ASP 动态添加Html Table行
用JS放法实现以下效果: 前端文件Questionnaire23.aspx: <%@ Page Title="题目" Language="C#" Mast ...
- jquery动态添加删除div--事件绑定,对象克隆
我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...
- jQuery中如何给动态添加的元素绑定事件
jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...
- jQuery动态添加删除CSS样式
jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...
- 编辑 Ext 表格（一）——— 动态添加删除行列
一.动态增删行 在 ext 表格中,动态添加行主要和表格绑定的 store 有关, 通过对 store 数据集进行添加或删除,就能实现表格行的动态添加删除. (1) 动态添加表格的行 gridS ...
- jquery 删除table行,该如何解决
query 删除table行< table > < tbody > < tr > < td > 这行原来就有 </ td > < ...
- jquery 无刷新添加/删除 input行 实时计算购物车价格
jquery 无刷新添加/删除 input行 实时计算购物车价格 jquery 未来事件插件jq_Live_Extension.js 演示 <script> $(document).rea ...
- JQuery事件绑定，bind与on区别
jquery事件绑定bind:向匹配元素添加一个或多个事件处理器 $(selector).bind("click",data,function); live:向当前或未来的匹配元素 ...
- jQuery事件绑定和委托实例
本文实例讲述了jQuery事件绑定和委托.分享给大家供大家参考.具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on() . bind() . live() . delegate ...
随机推荐
- vue + skyline 搭建 一个开发环境
1.之前用的是ext + skyline搭建环境 ,正好最近是做前端的事情,有时间用vue + skyline 搭建一个三维场景 2.准备vue 2.x ,UI 用的是iview 和element ...
- CSS 小结笔记之选择器
Css选择器主要分为以下几类 类选择器 ID选择器 通配符选择器 标签选择器 伪类选择器 复合选择器 1.类选择器:通过.classname 来选择 例如 .color2 { color: rebec ...
- 团队项目个人进展——Day01
一.昨天工作总结 冲刺第一天,昨天阅读了小程序官方文档关于对视图层和逻辑层的介绍 二.遇到的问题 对小程序的样式文件——WXML里的标签不太理解,相比之下,html的标签更能让人接受 三.今日工作规划 ...
- mysql常用语句备忘
1.连接本地数据库 mysql -h localhost -u root -p123 2.连接远程数据库 mysql -h 192.168.0.201 -P 3306 -u root -p123 3. ...
- c# 设计模式 之：策略模式
算法与对象的耦合: 对象可能经常需要使用多种不同的算法,但是如果变化频繁,会将类型变得脆弱... 动机: 在软件构建过程中,某些对象使用的算法可能多种多样,经常 ...
- Oracle EBS 新增OAFM个数
在 $INST_TOP/ora/10.1.3/opmn/conf/opmn.xml中找到<process-type id="oafm" module-id="OC4 ...
- 第八章 SQL高级处理 8-2 GROUPING运算符
一.同时得到合计行 合计行是不指定聚合键时得到的汇总结果. UNION ALL与UNION的不同之处是它不会对结果进行排序,因此比UNION性能更好. 二.ROLLUP——同时得出合计和小计 GR ...
- 用block将UIAlertView与UIActionSheet统一起来
用block将UIAlertView与UIActionSheet统一起来 效果 1. 将代理方法的实例对象方法转换成了类方法使用 2. 要注意单例block不要长期持有,用完就释放掉 源码 https ...
- linux下jira搭建&破解(转自：https://www.cnblogs.com/zpw-1/p/9553358.html)
写在前面 网络类似文章不少,但是同样的路,别人走可能一马平川,自己走可能磕磕绊绊.记录一下自己搭建过程的一路踩坑历程[目前还记得的]. 一.环境准备 1,jira7.3的运行是依赖java环境的,也就 ...
- Data Compression
数据压缩 introduction 压缩数据可以节省存储数据需要的空间和传输数据需要的时间,虽然摩尔定律说集成芯片上的晶体管每 18-24 个月翻一倍,帕金森定律说数据会自己拓展来填满可用空间,但数据 ...