在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行的更多相关文章

  1. Js实现动态添加删除Table行示例

    <table cellpadding="0" cellspacing="0" border="1" style="margi ...

  2. C# ASP 动态添加Html Table行

    用JS放法实现以下效果: 前端文件Questionnaire23.aspx: <%@ Page Title="题目" Language="C#" Mast ...

  3. jquery动态添加删除div--事件绑定,对象克隆

    我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...

  4. jQuery中如何给动态添加的元素绑定事件

    jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...

  5. jQuery动态添加删除CSS样式

    jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...

  6. 编辑 Ext 表格（一）——— 动态添加删除行列

    一.动态增删行 在 ext 表格中,动态添加行主要和表格绑定的 store 有关, 通过对 store 数据集进行添加或删除,就能实现表格行的动态添加删除.   (1) 动态添加表格的行  gridS ...

  7. jquery 删除table行,该如何解决

    query 删除table行< table >  < tbody >  < tr >  < td > 这行原来就有 </ td >  < ...

  8. jquery 无刷新添加/删除 input行 实时计算购物车价格

    jquery 无刷新添加/删除 input行 实时计算购物车价格 jquery 未来事件插件jq_Live_Extension.js 演示 <script> $(document).rea ...

  9. JQuery事件绑定，bind与on区别

    jquery事件绑定bind:向匹配元素添加一个或多个事件处理器 $(selector).bind("click",data,function); live:向当前或未来的匹配元素 ...

  10. jQuery事件绑定和委托实例

    本文实例讲述了jQuery事件绑定和委托.分享给大家供大家参考.具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on()  . bind()  . live()  . delegate ...

随机推荐

  1. 仿饿了吗点餐界面两个ListView联动效果

    这篇文章主要介绍了仿饿了点餐界面2个ListView联动效果的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下 如图是效果图: 是仿饿了的点餐界面 1.点击左侧的ListView,通过在在适 ...

  2. Android实战——GreenDao3.2的使用，爱不释手

    1前言 GreenDao是一款操作数据库的神器,经过了2.0版本的升级后,已经被广泛的开发者使用.确实是很好用,入门简单,可以剩去了数据库的建表操作和数据库SQL的编写,博主用了一次之后爱不释手,和以 ...

  3. 关于微信小程序开发中遇到的缺少game.json问题的解决

    一.小程序开发的两种选项 ①小游戏开发:内部对应的入口配置文件为game.json丶game.wxml之类的文件或者项目. ②小程序开发:内部对应的入口配置文件为app.json丶app.wxml之类 ...

  4. maven 结合mybaits整合框架，打包时mapper.xml文件，mapper目录打不进war包去问题

    首先,来看下MAVENx项目标准的目录结构: 一般情况下,我们用到的资源文件(各种xml,properites,xsd文件等)都放在src/main/resources下面,利用maven打包时,ma ...

  5. react实例：理解dva构建项目的原理

    请点击相应的步骤查看详情 我们首先搭建一个 dva Demo  项目(请参考react快速构建一个应用项目),然后逐步完成以下内容: 结构划分 设计 Model 组件设计方法 组件设计实践 添加 Re ...

  6. 分享：Windows2008重启后提示系统恢复选项的解决办法

    如题:WINdows2008服务器. 重启后提示系统恢复选项的解决办法 使用windows 2008后,不能启动的问题,重启后出现 修复系统选项 采用下面帖子中的部分命令搞定之. 我自己是直接使用:选 ...

  7. Linux 加载卷组

    root 用户下执行: vgchange -ay vgdatamount /u01 vgdisplay 查看卷组

  8. 安装 jemalloc for mysql

    参考: MySQL bug:https://bugs.mysql.com/bug.php?id=83047&tdsourcetag=s_pcqq_aiomsg https://github.c ...

  9. Error loading XML document: dwz.frag.xml 处理方式

    问题:直接用IE打开index.html弹出一个对话框:Error loading XML document: dwz.frag.xml 方案一(已经验证): 转自:http://blog.csdn. ...

  10. python---九九乘法表代码

    #_*_ coding:utf-8 _*_# author choco ''' #while循环num1=0while num1<9: num1+=1 num2=1 while num2< ...