<!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. 前端js优化方案（连续更新）

    最近在读<高性能javascript>,在这里记录一下读后的一些感受,顺便加上自己的一些理解,如果有兴趣的话可以关注的我的博客http://www.bloggeng.com/,我会不定期发 ...

  2. 历上最强的音乐播放器（jetA…

    原文地址:历上最强的音乐播放器(jetAudio-8.0.5.320-Plus-VX-完全汉化版)下载作者:盖世天星 历上最强的音乐播放器(jetAudio-8.0.5.320-Plus-VX-完全汉 ...

  3. sublime中如何在浏览器中打开文件？

    SideBarEnhancements 侧边栏增强 SideBarEnhancements本是增强侧边栏的插件,这里将教大家如何用来做sublime text 3浏览器预览插件,并可自定义浏览器预览的 ...

  4. SwaggerUI笔记

    关于 Swagger Swagger能成为最受欢迎的REST APIs文档生成工具之一,有以下几个原因: Swagger 可以生成一个具有互动性的API控制台,开发者可以用来快速学习和尝试API. S ...

  5. 九度OJ 1013 开门人和关门人

    #include <iostream> #include <string.h> #include <sstream> #include <math.h> ...

  6. 个人作业1——四则运算题目生成程序（基于java）

    项目代码: https://git.coding.net/YJh_/11.git 题目要求: 除了整数以外,还要支持真分数的四则运算,真分数的运算,例如:/ + / = / 运算符为 +, −, ×, ...

  7. 展示博客（beta）

    1.基本介绍 团队成员简介 a.王婧:http://www.cnblogs.com/xmwj/ b.柯怡芳:http://www.cnblogs.com/keyi123/ c.陈艺菡:http://w ...

  8. 201521123030《Java程序设计》第5周学习总结

    1. 本周学习总结 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 因为i在类中是priv ...

  9. 201521123079《java程序设计》第3周学习总结

    1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...

  10. 201521123088《java程序与设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 1. 常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出 ...