<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        table{

            border-collapse: collapse;

            margin-top:50px;

        }

        th,td{

            width: 80px;

            height: 40px;

            line-height: 40px;

            text-align: center;

            border:1px solid #000;

        }

    </style>

</head>

<body>

<input type="text" value="zs">姓名

<input type="text" value="20">年龄

<input type="text" value="女">性别

<button type="button" class="tj">提交</button><br/>

<table>

    <thead>

    <tr>

        <th><input type="checkbox" class="checkAll">全选</th>

        <th>姓名</th>

        <th>年龄</th>

        <th>性别</th>

        <th>操作</th>

    </tr>

    </thead>

    <tbody>

    <!--<tr>

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

        <td>zs</td>

        <td>20</td>

        <td>nan</td>

        <td><button>删除</button></td>

    </tr>-->

    </tbody>

</table>

<script>

    //计数器

    var n=0;

    $(".tj").click(function(){

        var name=$("input").eq(0).val();

        var age=$("input").eq(1).val();

        var sex=$("input").eq(2).val();

        var add="<tr><td><input type='checkbox'></td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td><td><button>删除</button></td></tr>"

        $("table").append(add);

    });

    /*$("tbody button").click(function(){

     alert(0)

     })*/

    $("tbody").on("click","button",function(){

        $(this).parents("tr").remove();

    });

    //点击全选，下面的全部选择

    $(".checkAll").click(function(){

        //console.log($(this).prop("checked"));

        if($(this).prop("checked")==true){

            $("tbody input").prop("checked",true);

        }else{

            $("tbody input").prop("checked",false);

        }

    });

    //下面的选择点击

    $("tbody").on("click","input",function(){

        if($(this).prop("checked")==true){

            n++;

        }else{

            n--;

        }

        if(n==$("tbody input").length){

            $(".checkAll").prop("checked",true);

        }else{

            $(".checkAll").prop("checked",false);

        }

    });

</script>

</body>

</html>

Js全选 添加和单独删除的更多相关文章

  1. Android高级控件（一）——ListView绑定CheckBox实现全选，增加和删除等功能

    Android高级控件(一)--ListView绑定CheckBox实现全选,增加和删除等功能 这个控件还是挺复杂的,也是项目中应该算是比较常用的了,所以写了一个小Demo来讲讲,主要是自定义adap ...

  2. 【jquery】一个简单的单选、多选、全选、反选、删除的小功能

    对表格内容进行单行删除.单行选中.多行选中.全选.反选.删除选中行等操作 HTML代码 <table class="table table-bordered border-shadow ...

  3. JS全选功能代码优化

    原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...

  4. 简单JS全选、反选代码

    1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...

  5. Jquery 实现添加删除，checkbok 的全选，反全选，但是批量删除没有实现

    <!DOCTYPE html><html> <head>  <meta charset="utf-8" />  <title& ...

  6. js实现表单项的全选、反选以及删除操作

    <html> <head> <title>test</title> <script language="javascript" ...

  7. jQuery实现全选/反选和批量删除

    <%@ page language="java" contentType="text/html; charset=utf-8"     pageEncod ...

  8. JS全选

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  9. Thinkphp 全选、反选 批量删除

    完整案例 前台 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

随机推荐

  1. none，hidden和opacity="0"设置元素不可见的区别

    none,hidden和opacity="0"均可设置元素为不可见的状态.其中none属于display的属性值,hidden属于visibility的属性值.使用none时元素不 ...

  2. 在数组a中，a[i]+a[j]=a[k]，求a[k]的最大值，a[k]max——猎八哥fly

    在数组a中,a[i]+a[j]=a[k],求a[k]的最大值,a[k]max. 思路:将a中的数组两两相加,组成一个新的数组.并将新的数组和a数组进行sort排序.然后将a数组从大到小与新数组比较,如 ...

  3. 1st_homework_SE--四则运算题目生成器

    0x00 Code 查询源代码及README请点此 0x01 需求分析 实现一个自动生成小学四则运算题目的命令行程序. 0x02 功能设计 主要功能为: 接受用户输入以便知道要出多少道题目python ...

  4. Mac/Windows开发跨平台.NET Core 控制台程序

    自从微软开始在Github上开源搞.NET Core后,.NET的跨平台逐渐就成真了.多年使用各种语言,说实话还是csharp用起来最舒服.不过现在的工作环境里使用它的机会比较少,大部分时候只是用来写 ...

  5. Java课程设计——猜数游戏（201521123111 陈伟泽）

    Java课程设计--猜数游戏(201521123111 陈伟泽) 1.团队课程设计博客链接 博客作业--猜数游戏 2.个人负责模块或任务说明 Answer:一些基础界面的构造,排行榜的构造,用文件录入 ...

  6. 201521123044 《Java程序设计》第9周学习总结

    1. 本章学习总结 2. 书面作业 本次PTA作业题集异常 1.常用异常题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何避免 ...

  7. 201521123025《java程序设计》第12周学习总结

    #1. 本周学习总结 #2. 书面作业 将Student对象(属性:int id, String name,int age,double grade)写入文件student.data.从文件读出显示. ...

  8. Java Annotation注解继承说明

    有关Annotation的继承说明: 1.JDK文档中的说明是:只有在类上应用的Annotation才能被继承,而实际应用时的结果是:除了类上应用的Annotation能被继承外,没有被重写的方法的A ...

  9. 关于memcached的那些事儿

    一.前言 目前,memcached + mysql的这种存储组合,被广泛地应用到“读多写少”的应用场景上.那么在使用memcached的时候,我们需要注意哪些问题呢? 下面我们来探讨下使用memcac ...

  10. MySQL集群（四）之keepalived实现mysql双主高可用

    前面大家介绍了主从.主主复制以及他们的中间件mysql-proxy的使用,这一篇给大家介绍的是keepalived的搭建与使用! 一.keepalived简介 1.1.keepalived介绍 Kee ...