Created
July 24, 2017 15:06
-
-
Save hsipeng/32c4737429d430a7cf73c6fd151d0a79 to your computer and use it in GitHub Desktop.
JQuery 选择器的表单删除，添加，修改操作。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <script language="JavaScript" src="../js/jquery-1.4.2.js"></script> | |
| <title>添加用户</title> | |
| </head> | |
| <body> | |
| <center> | |
| <br><br> | |
| 添加用户:<br><br> | |
| ID: <input type="text" name="id" id="id"/> | |
| 姓名: <input type="text" name="name" id="name" /> | |
| email: <input type="text" name="email" id="email" /> | |
| 电话: <input type="text" name="tel" id="tel" /><br><br> | |
| <button id="addUser">提交</button> | |
| <br><br> | |
| <hr> | |
| <br><br> | |
| <table id="usertable" border="1" cellpadding="5" cellspacing=0> | |
| <tr> | |
| <th><input type="checkbox" id="allCheckbox"/></th> | |
| <th>ID</th> | |
| <th>姓名</th> | |
| <th>email</th> | |
| <th>电话</th> | |
| <th>修改</th> | |
| <th>删除</th> | |
| </tr> | |
| <tr><td><input type="checkbox"></td><td>1</td><td>a</td><td>aaa@qq.com</td><td>13101855057</td><td><a href='javascript:'onclick='addmodifyUser(this);'>修改</a></td><td><a href="javascript:" onclick="removeUser(this);">删除</a></td></tr> | |
| </table> | |
| <button type="button" id="deleteUser">删除选中数据</button> | |
| <br> | |
| <br> | |
| <br> | |
| <hr> | |
| 修改用户:<br><br> | |
| ID:<input type="text" name="name" id="id_update" readonly="readoonly"/> | |
| 姓名: <input type="text" name="name" id="name_update" /> | |
| email: <input type="text" name="email" id="email_update" /> | |
| 电话: <input type="text" name="tel" id="tel_update" /><br><br> | |
| <input type="hidden" id="id_update"/> | |
| <button id="updateUser">提交</button> | |
| </center> | |
| </body> | |
| <script type="text/javascript"> | |
| var USER_ID = 2;//自增userid | |
| var CHECK_ALL = false;//全选状态值 | |
| function SearchIdInTable(tablerow, findid) { | |
| let i; | |
| let tablerownum = tablerow.length; | |
| // alert(tablerow.length+":"+findid) | |
| for(i = 1;i <=tablerownum; i++){ | |
| // alert($("#usertable tr:eq(1)").children()[1].innerHTML) | |
| if($("#usertable tr:eq("+i+")").children()[1].innerHTML == findid){ | |
| return i; | |
| } | |
| } | |
| return -1; | |
| } | |
| function removeUser(user) { | |
| $(user).parents("tr").remove() | |
| } | |
| function removeSelectUser() { | |
| $("#usertable input:gt(0):checked").each(function () { | |
| $(this).parents("tr").remove() | |
| }) | |
| } | |
| function addmodifyUser(user) { | |
| var userNodes = $(user).parents("tr").children() | |
| // for (var i = 0;i < userNodes.length;i++) { | |
| // console.log(userNodes[i].innerHTML) | |
| // } | |
| // alert(userNodes[1].innerHTML) | |
| $("#id_update").val(userNodes[1].innerHTML) | |
| $("#name_update").val(userNodes[2].innerHTML) | |
| $("#email_update").val(userNodes[3].innerHTML) | |
| $("#tel_update").val(userNodes[4].innerHTML) | |
| // removeUser(user) | |
| } | |
| $(document).ready(function() { | |
| $("#id").val(USER_ID) | |
| $("#addUser").click(function () { | |
| if(""==$("#name").val()||""==$("#email").val()||""==$("#tel").val()){ | |
| alert("不能为空。") | |
| }else{ | |
| $("#usertable").append("<tr>" | |
| +"<td><input type='checkbox'/></td>" | |
| +"<td>"+USER_ID+"</td>" | |
| +"<td>"+$("#name").val()+"</td>" | |
| +"<td>"+$("#email").val()+"</td>" | |
| +"<td>"+$("#tel").val()+"</td>" | |
| +"<td><a href='javascript:'onclick='addmodifyUser(this)'>修改</a></td>" | |
| +"<td><a href='javascript:'onclick='removeUser(this)'>删除</a></td>" | |
| +"</tr>"); | |
| USER_ID++; | |
| $("#id").val(USER_ID); | |
| $("#name").val(""); | |
| $("#email").val(""); | |
| $("#tel").val(""); | |
| } | |
| }) | |
| $("#deleteUser").click(function () { | |
| removeSelectUser() | |
| }) | |
| $("#updateUser").click(function () { | |
| // var updateUserList = [$("#id_update").val(),$("#name_update").val(),$("#email_update").val(),$("#tel_update").val()] | |
| // console.log(updateUserList) | |
| let i=SearchIdInTable($("#usertable tr"), $("#id_update").val()); | |
| // alert(i) | |
| if(i !=-1){ | |
| let name = $("#name_update").val() | |
| let email = $("#email_update").val() | |
| let tel = $("#tel_update").val() | |
| // alert($("#usertable tr:eq(" + i + ")").children()[1].innerHTML) | |
| $("#usertable tr:eq(" + i + ")").children()[2].innerHTML=name | |
| $("#usertable tr:eq(" + i + ")").children()[3].innerHTML=email | |
| $("#usertable tr:eq(" + i + ")").children()[4].innerHTML=tel | |
| $("#id_update").val("") | |
| $("#name_update").val("") | |
| $("#email_update").val("") | |
| $("#tel_update").val("") | |
| } | |
| }) | |
| //获取复选框 如果下边的复选框有一个没有选中 则全选按钮应该 取消选中 | |
| $(":checkbox").click(function(){ | |
| if(!$(this).attr("checked")){ | |
| //下边的复选框 没有选中 | |
| $("#allCheckbox").attr("checked",false); | |
| } | |
| /** | |
| * 先判断全部复选框的个数，如果选中的个数和全部复选框的个数相同。全选框应该选中 | |
| */ | |
| var number = $("#usertable :checkbox:not(#allCheckbox)").length; //全部复选框的个数 | |
| var checkNumber = $("#usertable :checked:not(#allCheckbox)").length; //选中的个数 | |
| if(number==checkNumber){ | |
| $("#allCheckbox").attr("checked",true); | |
| } | |
| }); | |
| }); | |
| $("#allCheckbox").click(function () { | |
| if(CHECK_ALL){ | |
| CancelAll(); | |
| CHECK_ALL = false; | |
| }else{ | |
| checkAll(); | |
| CHECK_ALL = true; | |
| } | |
| }) | |
| function checkAll(){ | |
| $("#usertable input[type='checkbox']").each(function(index, el){ | |
| $(this).attr("checked","checked"); | |
| }) | |
| } | |
| function CancelAll(){ | |
| $("#usertable input[type='checkbox']").each(function(index, el){ | |
| $(this).attr("checked",""); | |
| }) | |
| } | |
| </script> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment