标签：function javascript 添加 var eq click select
<!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>
标签：function,javascript,添加,var,eq,click,select 来源： https://www.cnblogs.com/fate-/p/14678708.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。