<!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. PHP初入，简易网页整理（布局&特效的使用）

    html><html> <head> <meta charset="UTF-8"> <title></title> ...

  2. [转载]PS各个工具的字母快捷键和英文全名

    原文地址:PS各个工具的字母快捷键和英文全名作者:Tycho     选框-Marquee(M)     移动-move(V)     套索-Lasso(L)     魔棒-Wand(W) 喷枪-in ...

  3. 【Beta】Daily Scrum Meeting——Day5

    站立式会议照片 1.本次会议为第五次Meeting会议: 2.本次会议在早上9:35,在陆大2楼机房召开,本次会议为25分钟讨论今天要完成的任务以及接下来的任务安排. 燃尽图 每个人的工作分配 成 员 ...

  4. 201521123024《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 注意conve ...

  5. 201521123018 《Java程序设计》第12周学习总结

    1. 本章学习总结 你对于本章知识的学习总结 2. 书面作业 将Student对象(属性:int id, String name,int age,double grade)写入文件student.da ...

  6. Javascript-正则表达式-开发中的使用.

    -- "(-1~99)之间 -1表示无限次!" pattern="^((-1)|([0-9]{0,2}))$" -- "(0~99.99)之间 的金额 ...

  7. 利用angularJs自定义指令（directive）实现在页面某一部分内滑块随着滚动条上下滑动

    最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...

  8. MongoDB 分布式架构 复制 分片 适用性范围

    转载自 http://www.mongoing.com/archives/3573

  9. Android 之数据存储(sdCard,sharedPreference,sqlite数据库)

    sdCard:默认路径在 /storage/sdcard/... Android支持OpenFileOutput和openFileInput方式访问手机存储器上的文件. Context提供了如下两个方 ...

  10. 技巧收集-M1709

    2017.09 在macOS中直接复制文件路径,在Finder中选中文件,按下快捷键:Command + Option + C *** 以KB,MB,GB方式显示文件大小 ls -lh 删除超大文本文 ...