练习：使用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. JS以及CSS对页面的阻塞

    一.JS阻塞 所有的浏览器在下载JS文件的时候,会阻塞页面上的其他活动,包括其他资源的下载以及页面内容的呈现等等,只有当JS下载.解析.执行完,才会进行后面的 操作.在现代的浏览器中CSS资源和图片i ...

  2. 《Spring2之站立会议6》

    <Spring2之站立会议6> 昨天,向主界面中加入语音功能部分的代码: 今天,查相关资料解决debug: 遇到问题,一些问题是得到解决了,但是一些还未被解决.

  3. Answer the questions（回答自己的问题）

    第一章: 问题:我们现在学了这个专业,如果想全面去了解,应该还要学习哪些课程? 回答:其实软件工程只是一个比较大的范畴,以后如果要出去工作,我们还要细分,比如说开发安卓,开发游戏,web架构方面等很多 ...

  4. 《TCP/IP 详解 卷1：协议》第 11 章：名称解析和域名系统

    引言 到目前为止,我们使用 IP 地址来研究参与网络的主机.对于大众来说,这些地址太繁琐且难以记忆.为了使用如 TCP 和 IP 等协议,主机名称通过名为名称解析(name resolution)的过 ...

  5. appium启动sdk的android模拟器

    (1)启动sdk安装目录下的AVD Manager.exe (2)如下图,点击[create]按钮 (3)如下图,设置虚拟机的配置,至于Target中的:Android 4.4.2是在安装sdk的时候 ...

  6. oracle 简单的sysTimeStamp类型转date 类型

    oracle  简单的SYSTIMESTAMP 类型转date 类型 SELECT SYSTIMESTAMP , SYSTIMESTAMP+0 FROM dual; SAMPLE_TIME ----- ...

  7. 字符串拆分函数 func_splitstr

    create type str_split is table of varchar2(4000) ; 1 CREATE OR REPLACE FUNCTION splitstr(p_string IN ...

  8. jndi连接数据库配置过程总结

    一.我们先找到tomcat安装目录中conf目录下的context.xml更改里面的内容: <?xml version='1.0' encoding='utf-8'?> <Conte ...

  9. foo()与@foo()的区别

    1.@foo() 是错误控制输出,foo()是正常调用输出. 2.@符号在PHP 中可以忽略错误报告,对于表达式有提示错误的,但有不影响语句执行的,可以在表达式之前加@. 3.可以把@符号放在变量.函 ...

  10. xshell 常用快捷键

    1.连接mysql数据库mysql -uroot -p -h127.0.0.1 -P3306 2.列出所有sessionshow full processlist; 3.查看20条执行时间最长的SQL ...