练习：使用jQuery实现一个可以给table增加、删除行的页面

HTML代码：

<body>

 <input type="button" value="ADD" id="btn1"/>

 <input type="button" value="DEL" id="btn2"/>

 <div id="div1">

    <table border="1" width="200px" id="t1">

        <tr class="CaseRow">

            <td>test1</td>

            <td><input type="checkbox" /></td>

        </tr>

        <tr class="CaseRow">

            <td>test2</td>

            <td><input type="checkbox" /></td>

        </tr>

    </table>

 </div>

 </body>

JS代码

<script type="text/javascript">

    $(document).ready(function(){

        $("#btn1").click(function(){

            var tr = "<tr class='CaseRow'><td>new</td><td><input type='checkbox' /></td></tr>";

            $("table").append(tr);//向table中追加tr

        });

        $("#btn2").click(function(){

            var num=$("#t1 tr").filter(".CaseRow").size();//获得表格行数

            alert(num);

            if(num==1){

                alert("留一行，好不好");

                return;

            }

            var t=$("input:checked").parent().parent("tr").remove();//移除选中的行

        });

    });

</script>

【Asp.net入门3-03】jQuery-选择元素的更多相关文章

  1. jQuery——选择元素

    ###理解DOM jQuery最强大的特性之一就是能够简化在DOM中选择元素的任务.**DOM(文档对象模型)**充当了JavaScript与网页之间的接口,它以对象网络而非纯文本的形式来表现HTML ...

  2. jQuery选择元素的方法大全

    jQuery选择器其实是一个有些地方比较费解的,如果没有经过多次实验的话,很难得出它的每个操作符到底是干什么的,很容易出错,经过 我的多次测试,终于对一些比较难理解或容易出错的选择操作进行总结,既方便 ...

  3. jquery 选择元素

  4. jQuery选择器对应的DOM API ——选择元素

    英文原文:http://blog.garstasio.com/you-dont-need-jquery/selectors/愚人码头注: 原作者的写这文章的意图是让我们抛弃jQuery,You Don ...

  5. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  6. jQuery入门（2）使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  7. 抛弃jQuery：DOM API之选择元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...

  8. Jquery 系列（2） 选择元素

    Jquery基础学习 jQuery利用css选择符的能力,能够在DOM中快捷而轻松地获取元素. 主要内容如下: 介绍DOM树 如何通过CSS选择符在页中查找元素 扩展jQuery标准的CSS选择符 选 ...

  9. JQuery基础教程：选择元素（下）

    DOM遍历方法   利用前面介绍的jQuery选择符取得一组元素,就像是我们在DOM树中纵横遍历再经过筛选得到的结果一样.如果只有这一种取得元素的方式,那我们选择的余地从某个角度讲也是很有限的.很多情 ...

随机推荐

  1. Nginx 配置优化

    一.开启Gzip 1.参数 gzip on;gzip_min_length 1k;gzip_buffers 4 16k;gzip_comp_level 2;gzip_types text/plain ...

  2. java分布式事务，及解决方案

    1.什么是分布式事务 分布式事务就是指事务的参与者.支持事务的服务器.资源服务器以及事务管理器分别位于不同的分布式系统的不同节点之上.以上是百度百科的解释,简单的说,就是一次大的操作由不同的小操作组成 ...

  3. css修改input自动提示的黄色背景

    css修改input自动提示的黄色背景 input:-webkit-autofill { background-color: #FAFFBD; background-image: none; -web ...

  4. JS进阶系列之闭包

    刚刚总结完作用域链,我觉得很有必要马上对闭包总结一下,因为,之前也写过自己对闭包的理解,那时候只知道,闭包就是可以访问别的函数变量的函数,就是在函数里面的函数就叫做闭包,可是并没有深入探究,为什么,可 ...

  5. Promise.all请求失败重发功能的实现

    写爬虫时遇到用Promise.all同时请求多个页面,不可避免的会遇到某些请求失败的情况,这时可以实现一个"重发失败请求"的功能. Promise.all(task).then() ...

  6. 团队博客作业Week2 --- 学长学姐访谈录

    ## 团队作业2 ## ### 团队一 ### 这个团队中组员是位研一的学姐,她的软件工程老师是姚淑珍,当时她们团队总共有4个人,而且她们都很努力,但是可能是最后团队的作品不太理想,她们的软件并没有上 ...

  7. Task 9 从用户界面和体验分析“360极速浏览器”

    我目前使用的浏览器是360极速浏览器,下面将针对用户界面.记住用户选择.短期刺激.长期使用的好处坏处.不要让用户犯简单的错误四个方面对其进行评估: 1.用户界面: 01 可视性原则--网络没有连接或者 ...

  8. Ubuntu登录界面添加root用户登录选项

    1.普通用户登录系统并打开终端 配置root密码 $sudo passwd 切换至root用户 $su root 输入密码 修改以下配置文件 $nano /usr/share/lightdm/ligh ...

  9. Week2-作业1：阅读与博客

    Week2-作业1:阅读与博客 第一章 :概论 1. 原文如下: 移山公司程序员阿超的宝贝儿子上了小学二年级,老师让家长每天出30道加减法题目给孩子做.阿超想写一个小程序来做这件事,具体实现可以采用很 ...

  10. python3.6执行AES加密及解密方法

    python版本:3.6.2 首先安装pycryptodome cmd执行命令:pip install pycryptodome 特别简单,代码如下: #!/usr/bin/python # -*- ...