angularJs表格添加删除

来源：互联网发布：乱世佳人英文影评知乎编辑：程序博客网时间：2024/06/05 03:41

<!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><inputtype="checkbox"class="checkAll">全选</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>操作</th> </tr> </thead> <tbody>  </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>

阅读全文

0 0