练习：使用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. 随手记录-linux-vim使用

  2. Beta版本互评

    基于NABCD评论作品,及改进建议 经过alpha发布之后,迫不及待的使用了psp daily这款软件,使用非常方便,基本的功能都可以实现,经过beta周之后,我对这款产品非常期待,希望能给我更友好的 ...

  3. Daily Scrum (2015/10/21)

    今天可以说是项目正式开始的第一天,由于大家缺乏做团队项目的经验,对TFS的使用都还不太熟悉,所以今天大家的主要工作是熟悉TFS的使用和对代码进行初步的理解.我们预计需要2-3天时间来理解透彻源代码.以 ...

  4. 20172301 2017-2018-2 《程序设计与数据结构》实验一《Java开发环境的熟悉》实验报告

    20172301 2017-2018-2 <程序设计与数据结构>实验一<Java开发环境的熟悉>实验报告 课程:<程序设计与数据结构> 班级: 1723 姓名: 郭 ...

  5. Gogoing 场景调研（补）

    一.典型用户 蜗居在学校的大学生 二.场景描述 编号 用户故事 故事价值 (点数) 1 作为一名大学生,只知道学习 2 经常打游戏而无所事事的大学生 1.背景 (1)典型用户:张晨建 (2)用户的需求 ...

  6. css3学习笔记三

    css3有些特殊的元素选择器这和jquery相似.效果图如下

  7. Unity删除或更换天空盒

    Unity版本:5.6.2 点击菜单栏Window-->Lighting-->Settings 在弹出的窗口中,设置Skybox Material选项,从原来的默认天空盒更换成别的,或者选 ...

  8. HDU 2103 Family planning

    http://acm.hdu.edu.cn/showproblem.php?pid=2103 Problem Description As far as we known,there are so m ...

  9. js中__proto__和prototype的区别和关系？ 这样好理解多了

    原型的概念 真正理解什么是原型是学习原型理论的关键.很多人在此产生了混淆,没有真正理解,自然后续疑惑更多. 首先,我们明确原型是一个对象,其次,最重要的是, Every function has a ...

  10. apache +PHP多版本 切换的问题

    在开发中切换php版本的时候出错 经过2小时的日子排查终于找到是因为切换版本后加载的php7ts.dll模块还是原来版本的,因此保pid file 错误 解决方法 PHPIniDir "H: ...