<!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. C# xml增删查改

    C# XML XmlDocument 添加命名空间: using System.Xml; 定义公共对象: XmlDocument xmldoc ; XmlNode xmlnode ; XmlEleme ...

  2. CCIE-MPLS VPN-实验手册（下卷）

    10:跨域的MPLS VPN (Option A) 10.1 实验拓扑 10.1 实验需求 a.       R1 R2 R3 组成P-NETWORK R1 R2 R3 位于AS 1,底层协议采用EI ...

  3. springmvc注解

    简介: handler method 参数绑定常用的注解,我们根据他们处理的Request的不同内容部分分为四类:(主要讲解常用类型) A.处理requet uri 部分(这里指uri templat ...

  4. Nginx做文件下载服务器

    这是最简单的一种办法,贴完代码就能用 server { listen 80; charset utf-8; server_name localhost; root /data/file/; autoi ...

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

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

  6. 201521123121 《Java程序设计》第1周学习总结

    1. 本周学习总结 我们将要重点接触的JAVA SE主要分为4个部分:JVM.JRE.JDK.java语言. 其中JVM作为运行虚拟机隶属于JRE运行环境中,是JAVA通用性.跨平台适应性高的基础保证 ...

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

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

  8. Java课程设计-计算器 丁树乐（201521123024）

    1.团队课程设计博客链接 http://www.cnblogs.com/br0823/p/7064407.html 2.个人负责模块或任务说明 界面优化 各类之间拼接 3.自己的代码提交记录截图 4. ...

  9. JavaScript总体的介绍【JavaScript介绍、定义函数方式、对象类型、变量类型】

    什么是JavaScript? 我们可以从几个方面去说JavaScript是什么: 基于对象 javaScript中内置了许多对象供我们使用[String.Date.Array]等等 javaScrip ...

  10. Spring第六篇【Spring AOP模块】

    前言 Spring的第五篇也算是AOP编程的开山篇了,主要讲解了代理模式-..本博文主要讲解Spring的AOP模块:注解方式和XML方式实现AOP编程.切入点表达式.. AOP的概述 Aop: as ...