<!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>