提升用户体验：互动式表格与删除操作详解-优快云博客

本文链接：https://blog.youkuaiyun.com/l2423282916/article/details/115096099

文章目录

一、基础页面走一个
二、来给页面加点料
三、删除功能细完善
总结

要求基础页面效果：
页面居中
功能：当用户点击某一行最后的Delete时，将删除相应的行（记录）

一、基础页面走一个

分析：
首先，根据其展示效果，我们会用到表格来进行布局，我们可以先实现创建需要的表格，并将相应的文本内容进行填写

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除记录</title>
</head>
<body>
    <table>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th></th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>7000</td>
            <td><a>Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@Jerry.com</td>
            <td>10000</td>
            <td><a>Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@bob.com</td>
            <td>8000</td>
            <td><a>Delete</a></td>
        </tr>
    </table>
</body>
</html>

此时页面效果如下：
在这里插入图片描述
我们可以发现页面中表格并没有居中，且也没有边框

二、来给页面加点料

所以接下来，我们就需要给页面加上css，使其居中，且显示边框。(这就好比拍照的时候打开了美颜，或者我们通常所说的p图)

加入css样式有三种方式，内联，外联和内部，此处我采用的是外联样式

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除记录</title>
    <link rel="stylesheet" type="text/css" href="../blog/删除记录.css">
</head>
<body>
    <table id="tb">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th></th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>7000</td>
            <td><a href="deleteElem?id=001">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@Jerry.com</td>
            <td>10000</td>
            <td><a href="deleteElem?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@bob.com</td>
            <td>8000</td>
            <td><a href="deleteElem?id=003">Delete</a></td>
        </tr>
    </table>
</body>
</html>

/*
删除默认样式
*/
* {
    margin: 0;
    padding: 0;
}
/*
设置表格的边框
*/
table,th,td{
    border: 1px solid black;
    /*border-collapse属性可以将表格边框折叠为单一边框，此处如果没有这条语句，表格边框将为双边框，因为table和 th、td 元素都有单独的边框  */
    border-collapse:collapse;
}
/*
使表格居中显示
*/
#tb{    
    width: 232px;
    margin: 0px auto;
}

此时页面效果如下：
在这里插入图片描述
注：css的具有多种居中方法，其他居中方法请读者自行思考

此时页面效果已实现，接下来我们需要实现删除功能，这便涉及到了与用户的交互，需要用js来实现

三、删除功能细完善

删除功能应该实现：当用户点击某个Delete后，删除该行记录
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除记录</title>
    <link rel="stylesheet" type="text/css" href="../blog/删除记录.css">
    <script type="text/javascript">
     //删除一行，即删除tr
        window.onload=function(){
        // 获取所有的超链接
        var allA=document.getElementsByTagName("a");
        //通过for循环为每个a绑定一个单击响应函数
        for(var i=0;i<allA.length;i++){
            allA[i].onclick=function(){
        //我们可以观察到tr为a的爷爷节点，即：父节点的父节点，故我们可以通过这个关系进行删除操作
            // this即我们所点击的那个超链接a
            var tr=this.parentNode.parentNode;
            // 删除
            tr.parentNode.removeChild(tr);
            // 点击超链接后，将会跳转页面（超链接的默认行为），在此处我们并不需要其跳转，故通过return false来修改其默认行为
            // alert("hello");
               return false;
            }
        }
        
    }
    </script>
</head>
<body>
    <table id="tb">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th></th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>7000</td>
            <td><a href="deleteElem?id=001">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@Jerry.com</td>
            <td>10000</td>
            <td><a href="deleteElem?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@bob.com</td>
            <td>8000</td>
            <td><a href="deleteElem?id=003">Delete</a></td>
        </tr>
    </table>
</body>
</html>

此时实现效果为：当用户点击Delete后将会直接删除，在此处便会存在一个隐患：即用户为误点，不小心点到了Delete。这将给会用户带来极其不好的体验。
因此我们需要在用户点击Delete后，删除记录前，提示用户是否进行删除。而window对象的方法confirm()便具有这种功能
完善后的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除记录</title>
    <link rel="stylesheet" type="text/css" href="../blog/删除记录.css">
    <script type="text/javascript">
     //删除一行，即删除tr
        window.onload=function(){
            //点击超链接后，删除一个人的信息

        
        // 获取所有的超链接
        var allA=document.getElementsByTagName("a");
        //通过for循环为每个a绑定一个单击响应函数
        for(var i=0;i<allA.length;i++){
            allA[i].onclick=function(){
             
            //我们可以观察到tr为a的爷爷节点，即：父节点的父节点，故我们可以通过这个关系进行删除操作
            // this即我们所点击的那个超链接
            var tr=this.parentNode.parentNode;
            //获取员工的姓名，使提示信息更明确
            //getElementsByTagName将会返回一个数组
            var name=tr.getElementsByTagName("td")[0].innerHTML;
            //下面这条语句将返回undefined，因为此时tr的firstChild为空格，在删除tr与td之间的空格后，firstChild才是td
            // var name=tr.firstChild.innerHTML;
            var flag=confirm("确认删除"+name+"吗?");
            // 删除
            if(flag)
            {
            tr.parentNode.removeChild(tr);
            }
            // 点击超链接后，将会跳转页面（超链接的默认行为），在此处我们并不需要其跳转，故通过return false来修改其默认行为
            // alert("hello");
               return false;
            }
        }
        
    }
    </script>
</head>
<body>
    <table id="tb">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th></th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>7000</td>
            <td><a href="deleteElem?id=001">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@Jerry.com</td>
            <td>10000</td>
            <td><a href="deleteElem?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@bob.com</td>
            <td>8000</td>
            <td><a href="deleteElem?id=003">Delete</a></td>
        </tr>
    </table>
</body>
</html>