效果图如下：
html代码如下：
1. <body> 2. <div class="btn"> 3. <button class="seleAll">全选</button> 4. <button class="allDel">批量删除</button> 5. <button class="reverse">反选</button> 6. <button class="noneSele">全不选</button> 7. 8. <button class="add">添加</button> 9. </div> 10. 11. <table width="500" border="1" > 12. <tr height="30" align="center"> 13. <td> 选择 </td> 14. <td>姓名</td> 15. <td>爱好</td> 16. <td>性别</td> 17. <td>删除</td> 18. </tr> 19. <tr height="30" align="center"> 20. <td><input type="checkbox" /></td> 21. <td>范冰冰</td> 22. <td>演戏</td> 23. <td>女</td> 24. <td><input class="toDel" type="button" value="del" /> </td> 25. 26. </tr> 27. 28. 29. </table> 30. 31. 32. <div class="obox"> 33. <p><input class="name" type="text" value="姓名" /></p> 34. <p> 35. <select class="hobby"> 36. <option>音乐</option> 37. <option>篮球</option> 38. <option>体育</option> 39. </select> 40. </p> 41. <p> 42. <select class="sex"> 43. <option>男</option> 44. <option>女</option> 45. 46. </select> 47. </p> 48. 49. <p class="push"> 50. <button>确认提交</button> 51. 52. </p> 53. </div>
css代码如下：
1. .obox{ 2. width: 400px; 3. height: 400px; 4. margin: 0 auto; 5. background: #e5e5e5; 6. display:none; 7. } 8. .obox input{ 9. width: 150px; 10. height: 30px; 11. } 12. .obox select{ 13. width: 150px; 14. height: 30px; 15. 16. } 17. .obox p{ 18. width: 150px; 19. height: 30px; 20. margin: 0 auto; 21. margin-top: 30px; 22. } 23. 24. .push button:active{ 25. background: #00f; 26. }
jq代码如下：
1. // 点击添加显示弹窗 2. $(".add").on('click',function(){ 3. $(".obox").show() 4. 5. $(this).css({ 6. "background":"#0f0" 7. }) 8. 9. }) 10. // 点击确认提交提交数据 弹窗消失 11. 12. $(".push button").on("click",function(){ 13. 14. // 获取文本框数据 15. var theName= $(".name").val() 16. var theHobby=$(".hobby").val() 17. var theSex=$(".sex").val() 18. // <tr align="center"> 19. // <td><input type="checkbox" /></td> 20. // <td>范冰冰</td> 21. // <td>演戏</td> 22. // <td>女</td> 23. // <td><input type="button" value="del" /> </td> 24. // 25. // </tr> 26. // 将数据放到表格中 27. $("table").append(`<tr height='30' align='center'> 28. <td><input type='checkbox' /> </td> 29. <td >${theName} </td> 30. <td>${theHobby} </td> 31. <td>${theSex} </td> 32. <td> <input class='toDel' type='button' value='del' /></td> 33. </tr>`) 34. //弹窗消失 35. $(".obox").hide() 36. 37. $(".add").css({ 38. "background":"#ccc" 39. }) 40. //点击del 删除本条数据 41. $(".toDel").on("click",function(){ 42. $(this).parent().parent().remove() 43. 44. 45. }) 46. 47. 48. }) 49. 50. 51. //点击全选 全部选中 52. 53. $(".seleAll").on('click',function(){ 54. 55. var seleAll=$("input[type='checkbox']") 56. seleAll.each(function(){ 57. seleAll.prop('checked',true) 58. 59. }) 60. 61. 62. }) 63. // 反选 64. $(".reverse").on("click",function(){ 65. var seleAll=$("input[type='checkbox']") 66. 67. seleAll.each(function(){ 68. this.checked=!this.checked 69. 70. 71. }) 72. 73. }) 74. 75. //全不选 76. $(".noneSele").on("click",function(){ 77. var seleAll=$("input[type='checkbox']") 78. 79. seleAll.each(function(){ 80. seleAll.prop('checked',false) 81. 82. }) 83. }) 84. //批量删除 85. 86. $(".allDel").on("click",function(){ 87. 88. var allDel=$(":checkbox:checked") 89. if (allDel.length>0) { 90. allDel.each(function(){ 91. $(this).parent().parent().remove() 92. 93. }) 94. 95. } else{ 96. alert('请选中数据后在删除') 97. } 98. 99. }) 100. 101. //点击del 删除本条数据 102. $(".toDel").on("click",function(){ 103. $(this).parent().parent().remove() 104. 105. 106. })
好了！如果有更好的修改意见或建议欢迎留言
