wanglinuo521通过本文主要向大家介绍了jquery表单添加表格数据等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title></title> | |
| <script src="js/jquery-1.11.0.min.js"></script> | |
| <script> | |
| $(function() { | |
| // $(".btn_del").on('click', function() { | |
| // alert("123"); | |
| // }) | |
| $(document).on('click', '.btn_del', function() { | |
| $(this).parent().parent().remove() | |
| var tr = $("tr"); | |
| if(tr.length == 1) { | |
| $(".table").hide() | |
| } | |
| }) | |
| }) | |
| </script> | |
| <style> | |
| .table { | |
| width: 700px; | |
| } | |
| .table tr th { | |
| text-align: center; | |
| color: red; | |
| background-color: yellow; | |
| } | |
| .table td { | |
| border: 1px solid black; | |
| text-align: center; | |
| width: 140px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <hr /> 用户 | |
| <input type="text" class="user" id="user" />密码<input type="password" class="pwd" id="pwd" /> 邮箱 | |
| <input type="text" class="eml" id="eml" /><input type="button" id="btn" value="添加" /> | |
| <input type="button" value="批量删除" id="ip_del" /> | |
| <hr /> | |
| <table class="table" cellpadding="0px" cellspacing="0px"> | |
| <tr id="tr"> | |
| <th><input type="checkbox" id="cb_one" class="cb_one" /></th> | |
| <th>用户名</th> | |
| <th>密码</th> | |
| <th>邮箱</th> | |
| <th>操作</th> | |
| </tr> | |
| </table> | |
| <script> | |
| $(".table").hide(); | |
| $("#btn").click(function() { | |
| $(".table").show(); | |
| var user = $("#user").val(); | |
| var pwd = $("#pwd").val(); | |
| var eml = $("#eml").val(); | |
| var $tr = $("<tr><td><input type='checkbox' class='cb_ins'/></td><td>" + user + "</td><td>" + pwd + "</td><td>" + eml + "</td><td><button class='btn_del'>删除</button></td></tr>") | |
| $(".table").append($tr); | |
| /*$(".btn_del").on('click', function() { | |
| $(this).parent().parent().remove() | |
| })*/ | |
| }) | |
| var flag = true; | |
| $("#cb_one").click(function() { | |
| var aa = $("input[type=checkbox]") | |
| for(i = 0; i < aa.length; i++) { | |
| aa[i].checked = flag; | |
| } | |
| flag = !flag; | |
| }) | |
| $("#ip_del").click(function() { | |
| var $tr = $("input[type=checkbox]:checked"); | |
| if($tr.length == 0) { | |
| alert("至少选一行") | |
| } | |
| for(i = 0; i < $tr.length; i++) { | |
| if(i == 0) { | |
| var td = $($tr[i]) | |
| var aa = td.parent().parent(); | |
| if(aa.attr("id") != "tr") { | |
| alert(aa) | |
| td.parent().parent().remove(); | |
| } | |
| } else { | |
| $tr[i].parentNode.parentNode.remove(); | |
| } | |
| } | |
| var $tr = $("input[type=checkbox]"); | |
| if($tr.length == 1) { | |
| $(".table").hide(); | |
| } | |
| }) | |
| </script> | |
| </body> | |
| </html> |