今天首先使用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>