Js实战之员工信息的增加删除修改

最新推荐文章于 2022-11-10 23:41:14 发布

PCC.

最新推荐文章于 2022-11-10 23:41:14 发布

阅读量790

点赞数 2

分类专栏：前端-JavaScript基础文章标签： javascript html html5

本文链接：https://blog.csdn.net/weixin_44278828/article/details/120658395

版权

员工信息的增删查改

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>员工表的增删改查</title>
    <link rel="stylesheet" type="text/css" href="ex_2_style/css.css"/>
    <script type="text/javascript">
        /*
        实现删除员工的操作版本1.0
        缺点：没有代码耦合度太高，没有实现代码的封装分离。这些问题将会在版本2.0中得到解决
        window.onload = function () {
             /!*
             需求一：删除指定的员工
             步骤：
             1、获取所有的超链接
             2、为每一个超链接绑定一个单击响应事件
             3、点击超链接之后，弹出一个确认提示框，确认之后删除超链接所在的那一行
             4、return false:取消默认样式
              *!/

             var all = document.getElementsByTagName("a");//获取所有的超链接
             for (var i = 0; i < all.length; i++) {
                 all[i].onclick = function () {//为每一个超链接绑定单击响应事件
                     var tr = this.parentNode.parentNode;//点击超链接之后，想要做的事情是删除超链接所在的那一行
                     var name = tr.children[0].innerHTML;//获取要删除员工的姓名
                     var flag = confirm("确定要删除" + name + "吗？");//确认是否要删除当前员工的信息
                     if (flag) {
                         tr.parentNode.removeChild(tr);
                     }
                     return false;//取消默认样式，因为点击了超链接之后会进行页面跳转
                 }
             }
         }*/

        /*
        删除员工操作版本2.0：将删除操作封装起来
         */
        function delectEmployee() {
   
            var tr = this.parentNode.parentNode;//点击超链接之后，想要做的事情是删除超链接所在的那一行
            var name = tr.children[0].innerHTML;//获取要删除员工的姓名
            var flag = confirm("确定要删除" + name + "吗？");//确认是否要删除当前员工的信息
            if (flag) {
   
                tr.parentNode.removeChild(tr);
            }
            return false;//取消默认样式，因为点击了超链接之后会进行页面跳转
        }

        window.onload = function () {

最低0.47元/天解锁文章

PCC.

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Js实战之员工信息的增加删除修改

员工信息的增删查改<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>员工表的增删改查</title> &
复制链接

扫一扫