练习：使用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. Python基础_内置函数

        Built-in Functions     abs() delattr() hash() memoryview() set() all() dict() help() min() setat ...

  2. Arithmatic项目修改总结

    Arithmatic项目修改总结 github仓库 arithmatic3.0 一. 修改介绍 修改后类图: 1.关于类的合并 ==可以发现相比右边(旧)的类,左边(新)的类少了很多,这是我这次大改的 ...

  3. a标签的href为空的问题

    在表格里写一个a标签链接刷新表格的时候,没注意,把a标签的href设置为""空字符串,导致每次刷新表格之后会再刷新一次整体页面,找了很久都没发现问题出在哪里,最后无意之间,鼠标在一 ...

  4. Scrum Meeting 10.31

    成员 今日任务 明日任务 今日工作时长 徐越 整理开发文档,学习ip相关知识,学习servlet相关知识 代码迁移,学习数据库相关知识 5h 赵庶宏 学习学长的servlet代码 进行数据库的连接 4 ...

  5. C++：构造函数2——拷贝构造函数

     前言:拷贝构造函数是C++中的重点之一,在这里对其知识进行一个简单的总结. 一.什么是拷贝构造函数 在C++中,对于内置类型的变量来说,在其创建的过程中用同类型的另一个变量来初始化它是完全可以的,如 ...

  6. <<梦断代码>>读后感

    <梦断代码>中对软件工程所面临的种种困难与艰难的描述,即便再过5年读也许都不过时.因为正如原作者所说,书中描写的是一队人马并肩扛起代码大石,虽历经磨难仍欲将其推上山顶的故事,而正是这种故事 ...

  7. <!CDATA[]]用法详解

    所有 XML 文档中的文本均会被解析器解析. 只有 CDATA 区段(CDATA section)中的文本会被解析器忽略. PCDATA PCDATA 指的是被解析的字符数据(Parsed Chara ...

  8. 2018软工实践—Beta冲刺(1)

    队名 火箭少男100 组长博客 林燊大哥 作业博客 Beta 冲鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调组内工作 调试服务器性能 展示GitHub当日代码/文档签入记录(组内 ...

  9. 第一次spring冲刺第5天

    今天进行讨论基础功能的核心代码方面,还有简单的讨论继续关于界面的美化, 计算生成的答案功能 public class Core {// char[]h={'+','-','*','/'};int re ...

  10. 【贪心算法】POJ-3040 局部最优到全局最优

    一.题目 Description As a reward for record milk production, Farmer John has decided to start paying Bes ...