练习：使用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. Alpha阶段产品功能说明

    先展示一下我们的功能流程图吧~ 一.学生用户 1. 学生登陆注册 BuaaClubs是北航所有在校生都可以注册登录的网站. 登陆界面是这样哒~ 2. 浏览报名活动 同学们可以在这个网站上查看所有社团发 ...

  2. 20135337朱荟潼Java实验报告二

    20135337朱荟潼 实验二 Java面向对象程序设计 一.实验内容 1. 初步掌握单元测试和TDD 2. 理解并掌握面向对象三要素:封装.继承.多态 3. 初步掌握UML建模 4. 熟悉S.O.L ...

  3. ubuntu下screen的使用

    ubuntu下screen的使用 日常在通过SSH远程到服务器训练网络和深度学习的相关代码,经常需要花费很长的时间.利用SSH远程连接服务器,运行程序需要保证在此期间窗口不能关闭并且连接不能断开,否则 ...

  4. 校园跳蚤市场-Sprint计划

    一.现状 小组成员初步了解所做项目的大致内容,需要时间一步一步分析和规划. 二.部分需求索引卡 第一个阶段完成项目的其中一个模块(商品信息模块). 三.任务认领 产品负责人:林海信 Master:何武 ...

  5. DPDK L3fwd 源码阅读

    代码部分 整个L3fwd有三千多行代码,但总体思想就是在L2fwd的基础上,增加网络层的根据 IP 地址进行路由查找的内容. main.c 文件 int main(int argc, char **a ...

  6. 深入理解Java虚拟机&运行时数据区

      其中,程序计数器.虚拟机栈.本地方法栈3个区域随线程而生,随线程而灭.

  7. JS面向对象（封装，继承）

    在六月份找工作中,被问的最多的问题就是: js面向对象,继承,封装,原型链这些,你了解多少? 额,,,我怎么回答呢, 只能说,了解一些,不多不少,哈哈哈哈,当然,这是玩笑话. 不过之前学过java,来 ...

  8. 【转】python win32api win32gui win32con 简单操作教程（窗口句柄 发送消息 常用方法 键盘输入）

    作者:https://blog.csdn.net/qq_16234613/article/details/79155632 附:https://www.programcreek.com/python/ ...

  9. 这个网页用到了什么技术，<script>标签，还有双大括号{{}}是什么意思

    <#compress> <@override name="title">${brand.name}-商品</@override> <@ov ...

  10. mysql 添加行号

    首先准备演示数 DROP TABLE IF EXISTS `computer_stu`; CREATE TABLE `computer_stu` ( `id` ) NOT NULL, `name` ) ...