前台技术学习7（1）
今天首先使用jQuery进行了两个练习
一、从左到右，从右到左
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>从左到右，从右到左</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> div{ width: 130px; height: 140px; text-align: center; } </style> </head> <body> <div id="left"> <select multiple="multiple" name="sel01"> <option value="opt1">选项一</option> <option value="opt2">选项二</option> <option value="opt3">选项三</option> <option value="opt4">选项四</option> <option value="opt5">选项五</option> <option value="opt6">选项六</option> </select> <button>选中添加至下边</button> <button>全部添加至下边</button> </div> <div id="right"> <select multiple="multiple" name="sel02"></select> <button>选中删除至上边</button> <button>全部删除至上边</button> </div> <script> $(function () { //选中添加至下边 $("button:eq(0)").click(function () { $("select[name='sel01'] option:selected").appendTo($("select[name='sel02']")); }); //全部添加至下边 $("button:eq(1)").click(function () { $("select:eq(0) option").appendTo($("select[name='sel02']")); }); //选中删除至上边 $("button:eq(2)").click(function () { $("select[name='sel02'] option:selected").prependTo($("select[name='sel01']")); }); //全部删除至上边 $("button:eq(3)").click(function () { $("select:eq(1) option").prependTo($("select[name='sel01']")); }); }) </script> </body> </html>
二、动态表格，之前的动态表格使用DOM对象实现，这次使用jQuery，容易理解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> #employ{ border: 1px solid black; width: 400px; height: 100px; } #formdiv{ border: 1px solid yellow; width: 400px; height: 240px; margin-top: 25px; } </style> </head> <body> <!-- DOM的增、删、改 内部插入 1、appendTo() 插入元素的末尾 2、prependTo() 插入元素的前面 外部插入 1、insertAfter() a.insertAfter(b) 得ba 2、insertBefore() a.insertBefore(b) 得ab 替换 1、replaceWith a.replaceWith(b) 用b换a 2、replaceAll() a.replaceAll(b) 用b全部换a --> <table id="employ" border="1"> <tr> <th>姓名</th> <th>邮箱</th> <th>薪资</th> <th>操作</th> </tr> <tr> <td>12</td> <td>3456@163.com</td> <td>5000</td> <td><a href="delete?id=001">删除</a></td> </tr> </table> <div id="formdiv"> <h4>添加新员工</h4> <table> <tr> <td class="word">姓名：</td> <td class="inp"><input type="text" name="enname" id="enname"></td> </tr> <tr> <td class="word">邮箱：</td> <td class="inp"><input type="text" name="email" id="email"></td> </tr> <tr> <td class="word">薪资：</td> <td class="inp"><input type="text" name="salary" id="salary"></td> </tr> <tr> <td colspan="2" align="center"> <button id="add1" value="添加">添加</button> </td> </tr> </table> </div> <script> $(function () { //删除部分代码包装函数 var deletefun = function () { var obj = $(this).parent().parent(); var anme = obj.find("a").text(); if(confirm("确定删除"+name+"吗？")){ obj.remove(); } return false } //添加 $("#add1").click(function () { //获取姓名、邮箱、薪资 var name = $("#enname").val(); var email = $("#email").val(); var salary = $("#salary").val(); var obj = $("<tr>" + " <td>"+name+"</td>" + " <td>"+email+"</td>" + " <td>"+salary+"</td>" + " <td><a href=\"delete?id=001\">删除</a></td>" + " </tr>"); obj.appendTo($("#employ")); //给新数据补加绑定 obj.find("a").click(deletefun); }); //删除 $("a").click(deletefun); //不使用deletefun()，防止函数自动执行 }) </script> </body> </html>
