javascript(四)
2021/4/19 22:28:37
本文主要是介绍javascript(四),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> select{ width:100px; height:140px; } div{ width:130px; float:left; text-align:center; } </style> <!--引入jQuery库--> <script type="text/javascript" src="../lib/jquery-1.7.2.js"></script> <script type="text/javascript"> //页面加载完成后 $(function(){ //第一个按钮,选中添加到右边 $("button:eq(0)").click(function(){ $("select:eq(0) option:selected").appendTo($("select:eq(1)")); }); //第二个按钮,全部添加到右边 $("button:eq(1)").click(function(){ $("select:eq(0) option").appendTo($("select:eq(1)")); }); //第三个按钮,选中删除到左边 $("button:eq(2)").click(function(){ $("select:eq(1) option:selected").appendTo($("select:eq(0)")) }); //第四个按钮,全部删除到左边 $("button:eq(3)").click(function(){ $("select:eq(1) option").appendTo($("select:eq(0)")) }); }); </script> </head> <body> <div id=left> <select multiple="multiple" name="sel01"> <option value="opt01">选项1</option> <option value="opt02">选项2</option> <option value="opt03">选项3</option> <option value="opt04">选项4</option> <option value="opt05">选项5</option> <option value="opt06">选项6</option> <option value="opt07">选项7</option> </select> <button>选中添加到右边</button> <button>全部添加到右边</button> </div> <div id="right"> <select multiple="multiple" name="sel02"> </select> <button>选中删除到左边</button> <button>全部删除到左边</button> </div> </body> </html>
动态添加和删除记录
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> #employeeTable { border-spacing: 1px; background-color: black; margin: 100px auto auto auto; } th,td { background-color: white; } #formDiv{ width: 250px; border-style:solid; border-width:1px; margin:50px auto auto auto; padding:10px; } #one{ text-align: center; } </style> <!--引入jQuery库--> <script type="text/javascript" src="../lib/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ //创建一个用于复用的删除函数 var deleteFun=function(){ /**在事件响应的function函数中,有一个this对象, * 这个this对象是当前正在响应事件的dom对象 */ var $trObj=$(this).parent().parent(); /** * confirm是javascript语言提供的一个确认提示框函数。 * 当用户点击了确定,就返回true,当用户点击了取消,就返回false */ var name=$trObj.find("td:first").text(); if(confirm("你确定要删除["+ name +"]吗?")){ $trObj.remove(); } //return false可以阻止元素的默认行为,a标签的默认行为就是跳转 return false; }; //给submit按钮绑定单击事件 $("#addEmpButton").click(function(){ //获取输入框、姓名、邮箱、工资的内容 var name=$("#empName").val(); var email=$("#email").val(); var salary=$("#salary").val(); //创建一个行标签对象,添加到显示数据的表格中 var $trObj=$( "<tr>"+ "<td>"+ name +"</td>"+ "<td>"+ email +"</td>"+ "<td>"+ salary +"</td>"+ "<td><a href=\"deleteEmp?id=002\">Delete</a></td>"+ "</tr>" ); //添加到显示数据的表格中 $trObj.appendTo($("#employeeTable")); //给新添加的a标签绑定单击事件 $trObj.find("a").click(deleteFun); }); //给删除的a标签绑定单击事件 $("a").click(deleteFun); }); </script> </head> <body> <table id="employeeTable"> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> <th> </th> </tr> <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="deleteEmp?id=001">Delete</a></td> </tr> <tr> <td>Jerry</td> <td>jerry@jerry.com</td> <td>8000</td> <td><a href="deleteEmp?id=002">Delete</a></td> </tr> <tr> <td>Bob</td> <td>bob@bob.com</td> <td>10000</td> <td><a href="deleteEmp?id=003">Delete</a></td> </tr> </table> <div id="formDiv"> <h4>添加新员工</h4> <table> <tr> <td class="word">name: </td> <td class="inp"> <input type="text" name="empName" id="empName"> </td> </tr> <tr> <td class="word">email: </td> <td class="inp"> <input type="text" name="email" id="email"> </td> </tr> <tr> <td class="word">salary: </td> <td class="inp"> <input type="text" name="salary" id="salary"> </td> </tr> <tr> <td colspan="2" id="one"> <button id="addEmpButton" value="abc"> Submit </button> </td> </tr> </table> </div> </body> </html>
这篇关于javascript(四)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-19永别了,微服务架构!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?