爱站程序员基地使用JavaScript/JQuery脚本完成对员工信息的增删改查和表格的动态拼接
JavaScript/JQuery完成对表格的增删改查和动态拼接
- 使用JavaScript/JQuery脚本完成对员工信息的增删改查和表格的动态拼接
- 1、语言环境和需求
- 2、编写表结构，编写表结构，引入jquery和javascript文件
- 3、实现“增加”功能，复制表格第一行数据，添加到表格最后一行
- 4、实现“删除”功能，删除员工
- 5、实现“查询”功能，查询员工ID，显示满足条件的员工信息
- 6、实现“修改”功能，根据员工ID，点击保存修改员工姓名和薪水。
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
如果你觉得有用的话，就留个赞吧！蟹蟹
