使用JavaScript/JQuery脚本完成对员工信息的增删改查和表格的动态拼接
JavaScript/JQuery完成对表格的增删改查和动态拼接
1、语言环境和需求
开发环境:Visual Studio Code /Visual Studio2019
需求说明:现有员工信息表,添加JavaScript/JQuery脚本完成员工信息的增删改查。页面如下图
2、编写表结构,编写表结构,引入jquery和javascript文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/new_file.js" type="text/javascript"></script>
</head>
<body>
<a href="#">增加</a>
<input type="text"/><a href="#">查询</a>
</p>
<table border="1" id="table">
<tr>
<th>ID</th>
<th>姓名</th>
<th>薪水</th>
<th>功能</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>8000</td>
<td>
<a href="#" class="bc" style="display: none;">保存</a>
<a href="#" class="xg">修改</a>
<a href="#" class="sc">删除</a>
</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>9000</td>
<td>
<a href="#" class="bc" style="display: none;">保存</a>
<a href="#" class="xg">修改</a>
<a href="#" class="sc">删除</a>
</td>
</tr>
</table>
</body>
</html>
3、实现“增加”功能,复制表格第一行数据,添加到表格最后一行
$(function(){
//增加
$("a:contains('增加')").click(function(){
var first=$("#table tr:eq(1)");
var news=first.clone(true);
news.appendTo(first.parent());
});
});
4、实现“删除”功能,删除员工
$(function(){
//删除
$("a.sc").click(function(){
$(this).parent().parent().remove();
});
});
5、实现“查询”功能,查询员工ID,显示满足条件的员工信息
$(function(){
//查询
$("a:contains('查询')").click(function(){
var keys=$("input").val();
var trr=$("table tr:gt(0)");
if(keys!=""){
for(var i=0;i<trr.length;i++){
var id=trr.eq(i).find("td:first").html();
if(id==keys){
trr.eq(i).show();
}
else{
trr.eq(i).hide();
}
}
}
else{
for(var i=0;i<trr.length;i++){
trr.eq(i).show();
}
}
})
});
6、实现“修改”功能,根据员工ID,点击保存修改员工姓名和薪水。
$(function(){
//查询
$("a:contains('查询')").click(function(){
var keys=$("input").val();
var trr=$("table tr:gt(0)");
if(keys!=""){
for(var i=0;i<trr.length;i++){
var id=trr.eq(i).find("td:first").html();
if(id==keys){
trr.eq(i).show();
}
else{
trr.eq(i).hide();
}
}
}
else{
for(var i=0;i<trr.length;i++){
trr.eq(i).show();
}
}
})
//修改
$(".xg").click(function(){
var tds=$(this).parent().parent().children();
for(var i=0;i<tds.length;i++)
{
var td=tds.eq(i);
if (td.children().length<=0) {
var html="<input type='text' value='"+td.text()+"'/>";
td.html(html);
}
}
$(".bc").show();
$(".xg").hide();
});
//保存
$(".bc").click(function(){
var tr=$(this).parent().parent();
var inputs=tr.find("input[type='text']");
for (var i=0;i<inputs.length;i++) {
var input=inputs.eq(i);
input.parent().text(input.val());
input.remove();
}
$(".bc").hide();
$(".xg").show();
});
});
到此就结束啦,快去练习一下吧!欢迎大佬和小Monkey沟通。
感谢大佬指正 小Monkey
如果你觉得有用的话,就留个赞吧!蟹蟹