<!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>
转载于:https://www.cnblogs.com/yangzhewoaini/p/7645854.html
1144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
