<!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. 【ctrl+A】与【ctrl+单击图层缩略图】有什么区别?

    如果这图层没有透明区域的话那和ctrl+A的效果是一样的! 但如果图层有不透明区域,那选中的就是图层中所有不透明的区域!

  2. HTML5 贝塞尔绘画 桃心

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

  3. 【Beta】 第四次Daily Scrum Meeting

    一.本次会议为第四次meeting会议 二.时间:10:00AM-10:20AM 地点:陆大楼 三.会议站立式照片 四.今日任务安排 成员 昨日任务 今日任务 林晓芳 查询app提醒功能模块和用户登录 ...

  4. PHOTOSHOP常用快捷键大全

    PHOTOSHOP常用快捷键大全一.文件新建 CTRL+N打开 CTRL+O 打开为 ALT+CTRL+O关闭 CTRL+W保存 CTRL+S 另存为 CTRL+SHIFT+S另存为网页格式 CTRL ...

  5. Java 最常用类（前100名）来自一万个开源项目

    大部分的 Java 软件开发都会使用到各种不同的库.近日我们从一万个开源的 Java 项目中进行分析,从中提取出最常用的 Java 类,这些类有来自于 Java 的标准库,也有第三方库.每个类在同一个 ...

  6. mongodb 常用的命令

    mongodb 常用的命令 对数据库的操作,以及登录 1 进入数据库 use admin 2 增加或修改密码 db.addUser('wsc', '123') 3查看用户列表 db.system.us ...

  7. Redis学习笔记之二 ：在Java项目中使用Redis

    成功配置redis之后,便来学习使用redis.首先了解下redis的数据类型. Redis的数据类型 Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set( ...

  8. Qt--自定义View

    这是上一篇文章的续篇,关于自定义View. 多个View内部可以映射到同一个数据模型,也可以映射不同的数据结构:可以使用所有数据,也可以只使用部分数据.因为视图层与数据层的分离,操作相对比较灵活. 1 ...

  9. Apache Spark 2.2.0 中文文档 - SparkR (R on Spark) | ApacheCN

    SparkR (R on Spark) 概述 SparkDataFrame 启动: SparkSession 从 RStudio 来启动 创建 SparkDataFrames 从本地的 data fr ...

  10. ptyhon 编程基础之函数篇（二）-----返回函数，自定义排序函数，闭包,匿名函数

    一.自定义排序函数 在Python中可以使用内置函数sorted(list)进行排序: 结果如下图所示: 但sorted也是一个高阶函数,可以接受两个参数来实现自定义排序函数,第一个参数为要排序的集合 ...