js 列表的添加，删除和修改

最新推荐文章于 2024-08-20 10:25:59 发布
最新推荐文章于 2024-08-20 10:25:59 发布
阅读量2.4k 收藏 3
点赞数
文章标签： javascript servlet 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/korey__/article/details/126790736
版权

<!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>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            list-style: none;

        }

        .wrap {

            width: 760px;

            margin: 0 auto;

            /* border: 1px solid black; */

            font-size: 20px;

            text-align: center;

        }

        button {

            width: 50px;

            height: 30px;

            font-size: 18px;

        }

        ul {

            margin-bottom: 20px;

        }

        li {

            display: flex;

            justify-content: space-between;

            padding-bottom: 15px;

            padding-top: 10px;

            border-bottom: 1px solid red;

        }

        span {

            font-size: 18px;

            display: inline-block;

            width: 50px;

            height: 30px;

            line-height: 30px;

            background: red;

            color: #fff;

        }

        span:nth-child(1) {

            margin-right: 10px;

            background: green;

        }

    </style>

</head>

<body>

    <div class="wrap">

        <ul>

            <li>

                列表1

                <div>

                    <span>修改</span>

                    <span>删除</span>

                </div>

            </li>

            <li>

                列表2

                <div>

                    <span>修改</span>

                    <span>删除</span>

                </div>

            </li>

            <li>

                列表3

                <div>

                    <span>修改</span>

                    <span>删除</span>

                </div>

            </li>

            <li>

                列表4

                <div>

                    <span>修改</span>

                    <span>删除</span>

                </div>

            </li>

        </ul>

        <button>添加</button>

        <script>

            var btn = document.querySelector("button");

            var ul = document.querySelector("ul");

            btn.onclick = function () {

                var text = prompt("请输入要添加的内容")

                var createLi = document.createElement("li");

                createLi.innerHTML = text +

                    `<div>

                          <span>修改</span>

                          <span>删除</span>

                    </div> `

                ul.appendChild(createLi);

            }

            ul.onclick = function (eve) {

                var ev = window.event || eve; var target = ev.target || ev.srcElement

                if (target.innerHTML == "修改") {

                    var text = prompt("请输入要添加的内容")

                    target.parentNode.parentNode.innerHTML = text +

                        `<div>

                          <span>修改</span>

                          <span>删除</span>

                    </div> `

                    ul.appendChild(createLi);

                } else if (target.innerHTML == "删除") {

                    target.parentNode.parentNode.remove()

                }

            }

        </script>

    </div>

</body>

</html>

岄.
关注
JavaScript添加列表操作
MPF1230的博客
08-12 8861
实现效果： 按照顺序自动生成编号，点击提交按钮后，将输入框中的内容添加进入列表当中。以及下拉框来选择性别为男或女。并且当输入框内容为空时，不向列表中添加元素，并且顶部字体变为红色。 包含的相关dom事件练习，onclick事件，获取元素getElement，创建元素createElement，元素节点appendChlid HTML代码 ​ <!DOCTYPE html> <h...
前端学习-第二阶段-day11
qq_34723035的博客
12-29 228
今日练习 利用事件代理，实现添加后的列表也可以触发点击事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <styl
原生JS实现虚拟列表
最新发布
凌凌的博客
08-20 437
如果我们要将一个数组渲染为列表添加到页面中，我们可以很容易实现，无非就是循环遍历这个数组，然后依次创建 DOM 元素插入即可，但是如果数据量很庞大，比如有一万条数据，我们就要把一万个 DOM 结点插入到页面中，这显然会导致页面的卡顿。为了针对这个场景进行优化，让页面和我们这个列表不那么卡顿，就可以使用虚拟列表来解决。
JS向表格里添加数据
qq_45968325的博客
05-18 7620
题目： 1） 定义一个Student对象， 该对象有sname、age、sex、nickname、hobby几个属性 2） 构建数据，将班里所有学生的信息创建成对应的Student对象， 并将这些Student对象存储到数组中 3） 在页面定义一个table标签，并将表头（th）写好。 4） 在表格下方添加一个添加按钮，并给按钮添加一个点击事件。 每点击一次按钮，就通过JS动态添加一行学生信息到表格的尾部。 如果全部添加完成，提示用户“添加完成” 5） 在表格下方添加一个移除按钮，并给按钮添加一个点击事件
3.使用原生js实现简单列表的增加、修改、删除
m0_52065154的博客
03-21 3896
1.描述 /* 事件委托: 本来该子元素的事情 交给父元素, 父元素接收到事件之后, 会找到触发的子元素，交给子元素处理 原理: 事件加给父元素 通过触发源(target、srcElement)找到子元素 优点: 1. 执行速度快 2. 子元素可以发生在未来 描述： 点击添加按钮，弹出一个文本输入框，将输入的值，添加到ul列表中 点击ul的时候 判断触发源的innerText （使用事件委托）
编码练习：使用 JS 向网页中添加一个列表
kllo__的博客
02-10 696
问题 原始网页如下： 代码如下：以下分别是 html 和 css 代码 <html> <head> </head> <body> <div id="content">ABC <br>Easy as <br>One, two, three </div> <div id="infos"></div> </body> </htm.
JS实现动态表格的添加，修改，删除功能(推荐)
10-22
以下是如何使用JS实现动态表格的添加、修改和删除功能。 首先，我们需要在HTML页面中设置一个基本的表格结构。例如，给定的代码片段创建了一个表格，包含参数名称、参数编码、参数值和一个操作列。操作列通常用于...
javascript为下拉列表动态添加数据项
10-25
通过DOM，我们能够对网页中的HTML元素进行查询、修改、添加或删除。在这个过程中，最基本的操作包括获取DOM元素、创建新的元素、添加事件监听器等。 在所提供的示例代码中，一个名为`gel`的函数被定义用来获取页面...
详解原生JS动态添加和删除类
10-17
原生JavaScript提供了多种方法来实现这一功能，以下将详细介绍如何利用原生JS动态添加和删除类。 首先，了解HTML DOM（文档对象模型）是进行类操作的基础。DOM是HTML文档的编程接口，提供了操作文档内容和结构的...
js实现class样式的修改、添加及删除的方法
10-24
在前端开发中，操作DOM元素的class属性是常见需求之一，包括添加、删除或修改class属性。这些操作对于控制元素的样式以及利用CSS类来切换动画或状态非常关键。JavaScript提供了多种方法来实现对class的操作，而利用...
JavaScript数组，JSON对象实现动态添加、修改、删除功能示例
10-18
在本示例中，我们将探讨如何使用JavaScript操作数组和JSON对象，以实现动态添加、修改和删除数据的功能。具体来说，通过JavaScript的内建方法来操作JSON对象的数组，能够灵活地处理JSON数据结构，这对于开发动态网页...
js 添加 删除 file组件
09-14
js 添加 删除 file组件
js在指定位置插入数据
01-14
js指定插入位置:鼠标定在某位置，将指定的值插入指定的位置
js list添加元素_JS基础与常用函数
热门推荐
weixin_39593277的博客
12-03 1万+
JavaScript是没有Print()方法的。所以要做内容输出，需要用到console.log(xxx) 控制台输出。Chrome浏览器中就可以编写代码，或者在编译器中，写纯JavaScript代码，输出时用console.log即可打印内容。在 js 的世界中 print() == console.log()基础认知字符串方法var 对数字的操作//MAth 可结合运算符多种搭配 数据类型与转...
JS中几个列表新增的方法：unshif,concat,push
Mr_TianSDQ的博客
04-07 660
【代码】JS中几个列表新增的方法：unshif,concat,push。
js list指定位置添加数据元素
qq_33330775的博客
03-16 4534
vararr1=["one","two","three"]; var arr2=["1","2"] arr1.splice(1, 0, ...arr2) ["one", "1","2","two","three"];
使用js根据指定的内容添加、删除、修改列表中的内容
m0_65068333的博客
09-26 1285
增加删除修改内容
js-列表修改
AsaZyf的博客
06-06 967
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; *{margin: 0;padding: 0;} ul li{ list-style: none; margin-bo
js书写信息添加列表
全栈若城,专注知识分享
10-08 889
js书写信息添加列表 ；  先上效果图 首先看一下css样式表 写法  .odiv{ width: 100%; height: 100px; } .odiv p{ width: 200px; float: left; height: 30px; line-height: 30px; } .odiv input{ ...
js商品列表的添加删除
06-06
你可以使用 JavaScript 创建一个商品列表，然后通过添加和删除功能来维护该列表。以下是一个简单的示例： ```html <!DOCTYPE html> 商品列表 , initial-scale=1"> 商品列表 ()">添加商品 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值