jquery的增删改查

1. <style>
2.    .addAll{
3.      display: none;
4.    }
5.  </style>

1.  <table class="tableOne" border="1" width="100%">
2.      <tr>
3.        <th><input type="checkbox" /></th>
4.        <th>姓名</th>
5.        <th>性别</th>
6.        <th>删除</th>
7. 
8.      </tr>
9.      <tr align="center">
10.         <td><input type="checkbox"  /> </td>
11.         <td>金豪</td>
12.         <td>男</td>
13.         <td><input class="del" type="button" value="删除" />
14.           <input class="xiugai" type="button" value="修改" />
15.         </td>
16.       </tr>
17.       <tr align="center">
18.         <td><input type="checkbox"  /> </td>
19.         <td>陈宇</td>
20.         <td>男</td>
21.         <td><input class="del" type="button" value="删除" />
22.           <input class="xiugai" type="button" value="修改" />
23.         </td>
24.       </tr>
25.       <tr align="center">
26.         <td><input type="checkbox"  /> </td>
27.         <td>麦腾阳</td>
28.         <td>男</td>
29.         <td><input class="del" type="button" value="删除" />
30.           <input class="xiugai" type="button" value="修改" />
31.         </td>
32.       </tr>
33.       <tr align="center">
34.         <td><input type="checkbox"  /> </td>
35.         <td>王思聪</td>
36.         <td>男</td>
37.         <td><input class="del" type="button" value="删除" /> <input class="xiugai" type="button" value="修改" /></td>
38.       </tr>
39.     </table>
40. 
41. 
42.     <button class="qx">全选</button>
43.     <button class="fx">反选</button>
44.     <button class="qbx">全不选</button>
45.     <button class="plsc">批量删除</button>
46.     <button class="add">添加</button>
47. 
48. 
49.     <table class="addAll" width="300" height="200" bgcolor="#e5e5e5">
50.       <tr align="center">
51.         <td>姓名</td>
52.         <td><input class="names" type="text" placeholder="请输入姓名" /></td>
53.       </tr>
54.       <tr align="center">
55.         <td>性别</td>
56.         <td>
57.           <select  class="sexs">
58.             <option>---请输入---</option>
59.             <option value="男">男♂</option>
60.             <option value="女">女♀</option>
61.           </select>
62. 
63.         </td>
64.       </tr>
65.       <tr align="center">
66.         <td  colspan="2">
67.           <button class="trueAdd">确认添加</button>
68.           <button class="truexiugai">确认修改</button>
69. 
70.         </td>
71. 
72.       </tr>
73. 
74.     </table>

1.  //全选
2.    $(".qx").on("click",function(){
3.      //找到复选框 
4.      $(":checkbox").prop("checked",true)
5. 
6.    })
7.    //第二种方法 点击复选框
8. //   $(":checkbox:first").on("click",function(){
9. //
10. //      $(":checkbox").prop("checked",$(this).prop("checked"))
11. //
12. //    })
13.     //反选 
14.     $(".fx").on("click",function(){
15.         $(":checkbox").each(function(){
16.           this.checked=!this.checked
17. 
18.         })
19. 
20.     })
21. 
22. 
23.     //全不选
24.     $(".qbx").on("click",function(){
25.       //找到复选框 
26.       $(":checkbox").prop("checked",false)
27. 
28.     })
29. 
30.     //删除
31.     $(".del").on("click",function(){
32.       $(this).parent().parent().remove()
33. 
34.     })
35.     //批量删除
36.     $(".plsc").on("click",function(){
37. 
38.       if ($(":checkbox:checked").length==0) {
39.         alert("请至少选中一条")
40.       } else{
41.         $(":checkbox:checked").each(function(){
42.         $(this).parent().parent().remove()
43.       })
44.       }
45. 
46. 
47.     })
48. 
49. 
50.     // 点击添加时出现弹层
51.     $(".add").on("click",function(){
52.       $(".addAll").show()
53.       $(".trueAdd").show()
54.       $(".truexiugai").hide()
55.     })
56.     //点击确认添加按钮的逻辑实现
57.     $(".trueAdd").on("click",function(){
58.       // 获取信息
59.       var name=$(".names").val()
60.       var sex=$(".sexs").val()
61. //      $(".trueAdd").text("确认添加")
62.       //姓名不得为空 如果性别为 ”请选择“ 改为男
63.       if (name=="") {
64.         alert("请输入姓名")
65.       } else if(sex=="---请输入---"){
66.         alert("请选择性别")
67.       }else{
68.         // 拼接 ，
69. 
70. 
71.     $(".tableOne").append(`<tr align="center">
72.         <td><input type="checkbox"  /> </td>
73.         <td>${name}</td>
74.         <td>${sex}</td>
75.         <td><input class="del" type="button" value="删除" />
76.           <input class="xiugai" type="button" value="修改" />
77.         </td>
78.       </tr>`)
79. 
80.       $(".names").val("")
81.       $(".sexs").val("---请输入---")
82. 
83.       $(".addAll").hide()
84.       }
85. 
86.       //删除
87.     $(".del").on("click",function(){
88.       $(this).parent().parent().remove()
89. 
90.     })
91. //      console.log(sex)
92. 
93.     })
94. 
95.     //修改
96. 
97.     $(".xiugai").on("click",function(){
98.       $(".addAll").show()
99. 
100.    //获取确认添加按钮文本改成确认修改
101. //       $(".trueAdd").text("确认修改")
102.      //获取当前的文本 
103.        var name =$(this).parent().siblings("td:nth-child(2)").text()
104. //       console.log(name)
105.      var sex = $(this).parent().siblings("td:nth-child(3)").text()
106. 
107.      $(".names").val(name)
108.      $(".sexs").val(sex)
109.      $(".trueAdd").hide()
110.      $(".truexiugai").show()
111.      var that=$(this)
112.      //点击确认修改时
113.    $(".truexiugai").on("click",function(){
114.      // 获取信息
115.      var name=$(".names").val()
116.      var sex=$(".sexs").val()
117.      that.parent().siblings("td:nth-child(2)").text(name)
118.      that.parent().siblings("td:nth-child(3)").text(sex)
119. 
120.      $(".addAll").hide()
121. 
122.    })
123. 
124.    })