js原生代码-点击按钮如何实现增删改

最新推荐文章于 2022-11-08 11:00:19 发布
最新推荐文章于 2022-11-08 11:00:19 发布
阅读量943 收藏
点赞数
文章标签： 大数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SYQ15544423296/article/details/125508288
版权

<body>

    <button οnclick="date(this)">新增</button>

    <script>

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

        function date(that) {

            var p = prompt("输入内容");

            let d = document.createElement("div");

            let t = document.createTextNode(p);

            d.appendChild(t);

            // 删除按钮

            let btn = document.createElement("button");

            let t1 = document.createTextNode("删除");

            btn.appendChild(t1);

            btn.setAttribute("onclick", "del(this)");

            d.appendChild(btn);


 

            // 修改按钮

            let btn2 = document.createElement("button");

            let t2 = document.createTextNode("修改");

            btn2.appendChild(t2);

            btn2.setAttribute("onclick", "update(this)");

            d.appendChild(btn2);

            document.getElementsByTagName("body")[0].appendChild(d);

        }

        // 删除

        function del(that) {

            document.getElementsByTagName("body")[0].removeChild(that.parentNode);

        }

        // 修改

        function update(that) {

            screenLeft

            var p = prompt("输入内容");

            let d = document.createElement("div");

            let t = document.createTextNode(p);

            d.appendChild(t)

            // 删除按钮

            let btn = document.createElement("button");

            let t1 = document.createTextNode("删除");

            btn.appendChild(t1);

            btn.setAttribute("onclick", "del(this)");

            d.appendChild(btn);

            // 修改按钮

            let btn2 = document.createElement("button");

            let t2 = document.createTextNode("修改");

            btn2.appendChild(t2);

            btn2.setAttribute("onclick", "update(this)");

            d.appendChild(btn2);

            // document.getElementsByTagName("body")[0].appendChild(d);

            document.getElementsByTagName("body")[0].replaceChild(d, that.parentNode)

        }

    </script>

</body>

从未转生的史莱姆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript动态创建、删除按钮的实现
weixin_40829083的博客
11-28 5243
本文介绍了如何用JavaScript动态地创建和删除按钮，以及如何实现新建按钮的onclick函数功能，新生成的按钮和相关的onclick函数可直接保存在文件中，从而实现了用html页面编辑自身的功能。 基本的html页面 基本的html页面如下，两个输入框，Name用来输入新建按钮的名字和ID，URL用来输入新建按钮可以打开的网页地址。也就是说新建按钮的功能就是按下按钮，就能打开相对应的网页。 add a button按钮用来新建一个新的按钮，remove a button用来删除一个按钮。而p标签是用来
使用jQuery对表格实现增、删、改、查
qq_54000867的博客
12-04 5870
需求： 下面输入框输入框输入数据，点击增加按钮，将数据添加至表格末尾，id实现自增 在上面输入框输入姓名，点击查询按钮，过滤出指定姓名数据显示 点击删除超链接，删除对应的行 点击修改超链接，修改超链接文本变为保存，同时ID、姓名、年龄变成输入框可编辑状态，点击保存超链接，如果输入框为空，将提示不能为空，输入框不为空时，修改后的数据将保存至表格并显示，同时保存超链接文本变成删除超链接 运行结果 HTML代码： <input type="text" /> <input t
js设置点击onclick事件之信息录入系统实现表格添加、修改、保存、删除内容
qq_53787962的博客
09-13 3594
第一步：1.创建姓名、学号、年龄、性别、学历等信息。 2.创建一个表格。3.创建添加按钮，把信息添加至表格中。第二步：1.获取button、input、table等元素节点。 2.给按钮设置点击事件。 3.点击触发创建一行、删除、修改按钮，创建单元格获取输入内容并添加至表格。第三步：1.给删除、修改按钮设置点击事件。2.点击删除所添加至表格的信息。3.点击修改所添加至表格的信息并保存。
jq点击按钮获取php的值删除,轻松实现jQuery添加删除按钮Click事件
weixin_30392607的博客
03-29 155
大家登陆一些网站或论坛时，经常会被要求先浏览和确认“用户协议”。“用户协议”底部通常会设置一个“我已阅读并同意”复选框，勾选了该复选框，“登陆”按钮才可用。如下图所示，勾选“I have read and accept.”复选框，Login按钮才会相应click事件，登陆成功后切换到欢迎画面。通常情况我们是怎么实现的呢，很多同学会想到用javascript设置按钮的disabled属性。这当然是一...
React：添加click - 删除操作
BLUEsang的博客
07-02 318
条件判断 传入index， if(this.state.isshow){ person=( <div> { this.state.persons.map((person,index)=>{ return <Person name={person.name} age={person.age}
js代码-原生js实现ajax
07-16
js代码-原生js实现ajax
原生js实现简单的Ripple按钮实例代码
10-20
本篇文章主要介绍了原生js实现简单的Ripple按钮实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
原生js按钮控制图片切换代码.zip
07-11
原生js基于css3属性制作三种图片切换效果，3D轮播、无缝轮播 、淡入淡出图片轮播任意切换代码。
js修改onclick动作的四种方法(推荐)
weixin_39214481的博客
07-13 1万+
第一种：button.onclick = Function("alert('hello');");第二种：button.onclick = function(){alert("hello"); };第三种：button.onclick = myAlert;              function myAlert(){                     alert("hello");   ...
用js实现添加和删除元素的功能
WaterArticle
07-21 845
用js实现添加和删除元素的功能。
JavaScript(JS) 清空删除数组元素的多种方法及示例代码
weixin_52026996的博客
11-08 2426
本文主要介绍JavaScript(JS)中，清空删除数组中的所有元素的多种方法，以及相关的示例代码。
如何写一个花里胡哨的点击按钮（HTML+CSS+JS）
陈新科的博客
03-02 6144
雷迪森安的乡亲们，欢迎来到老实人的前端课堂，今天我们来写个骚气磅礴的轮播图吧，内容太干，建议收藏起来慢慢看，最后我还会教大家如何免费部署上线哦~ 1646211569(1).jpg 正片 小轮播图滑动滚播，好不好看你说了算。 结构就两行 <div id="main"> <h1>something</h1> <div class="content"> <p>You can press <kbd>▲<
php 删除按钮怎么做,php删除按钮怎么实现,
weixin_31328141的博客
03-12 849
php删除按钮怎么实现·怎么实现的PHP删除按钮，php delete按钮的实现方法：首先将删除代码修改为“echo ‘a href=’del.php？Id=。$row[‘sysuser_id’]。删除/a ‘；’；然后构建一个名为“del.php”的文件；最后，在文件中编写删除函数。推荐： 《PHP视频教程》具体问题：php查询结果后删除按钮怎么的实现实现方法：1:这行代码代替你的删除代...
用JS实现点击按钮动态删除DIV
a1007174282的博客
06-20 9820
简单粗暴地直接删除DIV，一些更高级的方法还有待学习。
[JQuery]随心所欲添加删除按钮Click事件
seabreezesuper的博客
03-13 6484
大家登陆一些网站或论坛时，经常会被要求先浏览和确认“用户协议”。“用户协议”底部通常会设置一个“我已阅读并同意”复选框，勾选了该复选框，“登陆”按钮才可用。如下图所示，勾选“I have read and accept.”复选框，Login按钮才会相应click事件，登陆成功后切换到欢迎画面。 通常情况我们是怎么实现的呢，很多同学会想到用javascript设置按钮的disabled属性。这当然是
删除按钮代码
weixin_34148456的博客
08-25 595
private void button6_Click(object sender, EventArgs e){SqlConnection conn = BaseClass.DBConn.happyfood();conn.Open();SqlCommand cmd = new SqlCommand("delete from tb_Room whereRoomName='" + ...
html实现确认和取消按钮
热门推荐
yichangzxc的专栏
05-19 2万+
在填写表单的时候，有时候需要设置确认和重填的功能，可以借助JavaScript来实现。 就像这样，点击重填后，弹出确认框。   重填" onclick="return confirmReset()" class="buttonstyle" />   function confirmReset(){        var clickresult = false;
点删除按钮删一个条目
xiyangyang8110的博客
03-26 462
核心代码 if(layout_add.getChildCount()>0){ layout_add.removeViewAt(layout_add.getChildCount()-1); }private LinearLayout layout_add; @Override protected void
js 删除效果代码
weixin_33862993的博客
08-26 156
效果 css文件delcss.css 代码如下： *{ margin:0; padding:0;} #div1{ width:300px; height:100px; border-radius:10px; background:#f60; box-shadow:5px 5px 10px #ccc; position:absolute; left:50%; margin-left:...
原生js实现点击按钮复制功能
最新发布
06-08
原生 JavaScript 实现点击按钮复制功能也是可以的，可以使用 `document.execCommand('copy')` 方法来实现。以下是一个简单的实现示例： HTML 代码： ```html <button id="copy-btn" data-copy-text="要复制的内容...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值