JS中的添加删除记录练习--删除（包含思路）

最新推荐文章于 2022-10-24 19:17:50 发布

Fantasc

最新推荐文章于 2022-10-24 19:17:50 发布

阅读量246

点赞数

分类专栏： JS基础学习文章标签： javascript

本文链接：https://blog.csdn.net/Fantasc/article/details/119425296

版权

这篇博客探讨了如何在JavaScript中通过超链接删除用户信息。首先通过`getElementsByTagName`获取a元素数组，并遍历为每个元素绑定点击事件。为了避免点击超链接导致页面跳转，可以使用`return false`或`href="javascript:;"`。接着，利用`this`获取当前a元素及其祖先tr，通过`parentNode`查找祖先元素。然后，使用`confirm`弹出框确认删除操作。只有当用户点击确定时，才会删除对应用户信息。

摘要由CSDN通过智能技术生成

思路：

这个练习是要通过超链接来删除对应的用户信息，既然是要通过超链接来删除数据，那么就要先获取a元素。通过getElementByTagName来获取，返回的是封装a元素的数组，对这个数组进行遍历，分别为每一个a元素绑定单击响应函数。
- 注意：点击超链接会跳转页面，可以在末尾return false来取消页面的跳转，或者在a标签中加入href="javascript:;"来取消点击超链接时的页面跳转。
要分别获取对应a元素的tr祖先元素，就得知道当前的a标签对应的数据，通过this来指明当前的函数，至于this的用法，前面的博客里面有，或者在网上也能找到。这里的this指的就是绑定了单击响应函数的当前a元素，响应函数时为谁绑定的，this就是谁。通过parentNode来获取祖先元素，父亲的父亲就是祖先。
通过tr来确定要删除用户的名字，通过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">
    <link rel="stylesheet" type="text/css" href="css/cdtest.css"/>
    <title>Document</title>

    <script type="text/javascript">
        window.onload = function(){
   
            /* 
                1.点击超链接，删除一个员工的信息 
            */

            //获取页面中所有的超链接元素
            var As = document.getElementsByTagName("a");

            //为每一个超链接绑定单击响应函数
            for (var i = 0; i < As.length; i++) {
   
                As[i].onclick = function(

最低0.47元/天解锁文章

Fantasc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS中的添加删除记录练习--删除（包含思路）

思路：这个练习是要通过超链接来删除对应的用户信息，既然是要通过超链接来删除数据，那么就要先获取a元素。通过getElementByTagName来获取，返回的是封装a元素的数组，对这个数组进行遍历，分别为每一个a元素绑定单击响应函数。注意：点击超链接会跳转页面，可以在末尾return false来取消页面的跳转，或者在a标签中加入href="javascript:;"来取消点击超链接时的页面跳转。要分别获取对应a元素的tr祖先元素，就得知道当前的a标签对应的数据，通过this来指明当前的函
复制链接

扫一扫

专栏目录