js学习dom的增删改列表

最新推荐文章于 2023-01-24 15:30:57 发布
最新推荐文章于 2023-01-24 15:30:57 发布
阅读量339 收藏 1
点赞数
文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46564011/article/details/122441798
版权

 

 

<!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</title>
    <style>
        table{
            width: 100%;
            border-spacing: 0;
            border-top: 1px solid crimson;
        }
        td{
            border-bottom: 1px solid crimson;
            border-right: 1px solid crimson;
            text-align: center;
        }
        td:last-child{
            border-right: none;
        }
        td a{
            text-decoration: none;
            color: crimson;
        }
        td a:last-child{
            color: burlywood;
        }
        .modify-box{
            width: 400px;
            border: 1px solid darkolivegreen;
            position: fixed;
            top:25%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: gainsboro;
            display:none;
        }
        form table{
            border: none;
        }
        form td{
            border: none;
            color: black;
        }
    </style>
</head>
<body>
<!--    补充我们可以使用document.queryselectot()用css的 .***** 操作dom ;href="javascript:;" onclick="**()" /*表示返回undeined不跳转网页,执行**方法/javascript:void(0);-->
<!--    同理-->
    <div style="margin:50px auto;width: 600px;overflow: auto">
        <div style="width: 100%;height: 25px"><span>*z*******表</span><button id="insert_inf" style="float: right;width: 100px;background-color: grey">新增</button></div>
    <table>
        <thead><td>姓名</td><td>邮箱</td><td>salary</td><td>操作</td></thead>
        <tbody id="view_list">
        <tr><td>王麻子1</td><td>***@qq.com</td><td>16600</td><td><a name="Mbtn" href="#">修改</a>&nbsp;|&nbsp;<a name="Dbtn" href="#">删除</a></td></tr>
        <tr><td>王麻子2</td><td>***@qq.com</td><td>16600</td><td><a name="Mbtn"  href="#">修改</a>&nbsp;|&nbsp;<a name="Dbtn" href="#">删除</a></td></tr>
        <tr><td>王麻子2</td><td>***@qq.com</td><td>16600</td><td><a name="Mbtn"  href="#">修改</a>&nbsp;|&nbsp;<a name="Dbtn" href="#">删除</a></td></tr>
        <tr><td>王麻子2</td><td>***@qq.com</td><td>16600</td><td><a name="Mbtn"  href="#">修改</a>&nbsp;|&nbsp;<a name="Dbtn" href="#">删除</a></td></tr>
        <tr><td>王麻子2</td><td>***@qq.com</td><td>16600</td><td><a name="Mbtn"  href="#">修改</a>&nbsp;|&nbsp;<a name="Dbtn" href="#">删除</a></td></tr>
        <tr><td>王麻子2</td><td>***@qq.com</td><td>16600</td><td><a name="Mbtn"  href="#">修改</a>&nbsp;|&nbsp;<a name="Dbtn" href="#">删除</a></td></tr>
        <tr><td>王麻子2</td><td>***@qq.com</td><td>16600</td><td><a name="Mbtn"  href="#">修改</a>&nbsp;|&nbsp;<a name="Dbtn" href="#">删除</a></td></tr>
        <tr><td>王麻子2</td><td>***@qq.com</td><td>16600</td><td><a name="Mbtn"  href="#">修改</a>&nbsp;|&nbsp;<a name="Dbtn" href="#">删除</a></td></tr>
        </tbody>
    </table>
    </div>
    <div id="modify-box" class="modify-box">
<!--        隐藏的修改添加数据框-->
    <form>
        <spacn id="box-name" style="display: block"></spacn>
        <!--暂存数据实属无奈-->
        <span id="hidden-save-name" style="display: none"></span>
        <span id="hidden-save-email" style="display: none"></span>
        <span id="hidden-save-salary" style="display: none"></span>
        <table>
            <tr><td>姓名:</td><td><input type="text" name="m_name" value=""/></td></tr>
            <tr><td>邮箱:</td><td><input type="text" name="m_email" value=""/></td></tr>
            <tr><td>salary:</td><td><input type="number" name="m_salary" value=""/></td></tr>
            <tr><td><input id="reset" type="button" value="重置"></td><td><input id="submit" type="button" value="完成" ></td></tr>
        </table>
    </form>
    </div>
    <script type="text/javascript">
    var Dbtn=document.getElementsByName("Dbtn");
    var Mbtn=document.getElementsByName("Mbtn");
    var Mbox=document.getElementById("modify-box");
    var Mbox_name=document.getElementsByName("m_name");
    var Mbox_eamil=document.getElementsByName("m_email");
    var Mbox_salary=document.getElementsByName("m_salary");
    var Mbox_tag=document.getElementById("box-name");
    var Mbox_reset=document.getElementById("reset");
    var Mbox_submit=document.getElementById("submit");
    var Mbox_name_hidden=document.getElementById("hidden-save-name");
    var Mbox_eamil_hidden=document.getElementById("hidden-save-email");
    var Mbox_salary_hidden=document.getElementById("hidden-save-salary");
    var modifyer;/*保存修改的位置信息*/
    var Insert_btn=document.getElementById("insert_inf");
    var view_list=document.getElementById("view_list");
    function fun () {
        /*重点是插入删除必须重新赋方法来再次分配索引*/
        /*不要将循环赋值方法的函数写在循环外面会造成直接执行,是因为你把函数()写for里不是赋值而是调用函数*/
        for (let i = 0; i < Dbtn.length; i++) {
            /*为每个删除和修改添加事件,shit之前用循环没有添加成功我还以为不能*/
            Dbtn[i].onclick = function () {
                if (confirm("确定删除么?")) {/*confirm提示框会默认返回选择的false或true*/
                    let selftr = Dbtn[i].parentNode.parentNode;/*先获得自身的tr节点不要怕与其他tr重复他其实有内存地址区分的*/
                    Dbtn[i].parentNode.parentNode.parentNode.removeChild(selftr);
                    /*用table删除指定tr*/
                    fun();/*重新为列表配上方法,防止索引出现问题*/
                }
            }
            Mbtn[i].onclick = function () {
                /*打开修改盒子*//*虽然用了删除按钮的位置不影响就是偷懒*/
                modifyer = Dbtn[i].parentNode.parentNode;
                let box_name = Dbtn[i].parentNode.parentNode.children[0].textContent;
                let box_email = Dbtn[i].parentNode.parentNode.children[1].textContent;
                let box_salary = Dbtn[i].parentNode.parentNode.children[2].textContent;
                Mbox_tag.innerText = "修改中";
                Mbox_name[0].value = box_name;
                Mbox_eamil[0].value = box_email;
                Mbox_salary[0].value = box_salary;
                Mbox_name_hidden.innerText = box_name;
                Mbox_eamil_hidden.innerText = box_email;
                Mbox_salary_hidden.innerText = box_salary;
                Mbox.style.display = "block";
            }
        }
    }
    fun();
    /*完成修改点击提交按钮不考虑后端类型的数据交互只看js*/
        Mbox_reset.onclick=function(){
                Mbox_name[0].value = Mbox_name_hidden.innerText;
                Mbox_eamil[0].value = Mbox_eamil_hidden.innerText;
                Mbox_salary[0].value = Mbox_salary_hidden.innerText;
        }
        Mbox_submit.onclick=function(){
            if (Mbox_tag.innerText=="修改中") {/*我承认偷懒了尽量不要用标签字符串比较*/
                modifyer.innerHTML="<tr><td>"+Mbox_name[0].value+"</td><td>"+Mbox_eamil[0].value+"</td><td>"+Mbox_salary[0].value+"</td><td><a name=\"Mbtn\" href=\"#\">修改</a>&nbsp;|&nbsp;<a name=\"Dbtn\" href=\"#\">删除</a></td></tr>"
            }else{
                if(Mbox_name[0].value!=null&&Mbox_name[0].value!="") {
                    let insert1 = document.createElement("tr");
                    insert1.innerHTML = "<td>" + Mbox_name[0].value + "</td><td>" + Mbox_eamil[0].value + "</td><td>" + Mbox_salary[0].value + "</td><td><a name=\"Mbtn\" href=\"#\">修改</a>&nbsp;|&nbsp;<a name=\"Dbtn\" href=\"#\">删除</a></td>";
                    view_list.appendChild(insert1);
                    alert("插入成功");
                }else{
                    alert("姓名不能空");
                }
            }
            Mbox.style.display="none";
            modifyer=null;
            Mbox_name_hidden.innerText="";
            Mbox_eamil_hidden.innerText="";
            Mbox_salary_hidden.innerText="";
            Mbox_name[0].value ="";
            Mbox_eamil[0].value ="";
            Mbox_salary[0].value = "";
            /*这些都是清空操作过的数据*/
            fun();/*重新为列表配上方法*/
        }
        /*js会提升作用域所以下面再写插入也没事*/
            Insert_btn.onclick=function(){
                Mbox.style.display="block";
                Mbox_tag.innerText="新增";
            }
    /*写了好几个小时差点把我眼睛看瞎,还好ok了*/
    /*纯纯js
    * h5css
    * 确实累*/
        </script>

</body>
</html>

2333!!!!!
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【浅析】JS之DOM的增删查改
weixin_46229315的博客
04-02 344
选择DOM元素 Node节点 Node 是一个接口，各种类型的 DOM API 对象会从这个接口继承。 他有一些方法： 名字 描述 Node.firstChild 返回该元素的第一个子元素 Node.lastChild 返回该元素的最后一个子元素 Node.parentNode 返回该元素的父元素 Node.previousSibling 返回该元素的同辈的前一个元素 查 document.getElementById() 根据id查找dom元素，自上而下查找，如果有多个
DOM的增删改查
Always-Learning
11-26 144
1：在id名为city的div下添加一个li标签，标签内容为广州。 # 1：创建li元素 var li = document.createElement("li"); # 2：创建文本节点 var guangzhou = document.createTextNode("广州"); # 3：将li元素与文本绑定在一起 li.appendChild(guangzhou); # 4：获取id为city的节点 var city = document.getElementById("city"); # 5：将组合好
JS基础_添加删除记录练习-添加
兴趣是最好的老师
11-22 263
<!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...
JavaScript—DOM基础操作应用—列表的创建和删除
生活不止眼前的枸杞， 还有蜂蜜和咖啡！
12-27 275
文本： createElement（标签名）—— 创建节点 父级.insertBefore（子级，子级位置）—— 可应用于倒序插入 父级.appendChild（子级）——应用于尾部插入 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title...
JavaScript基础（十一）：DOM的增删改和操作样式
激洪的博客
03-29 300
JavaScript DOM的增删改和操作样式
使用js dom和jquery分别实现简单增删改
10-25
今天学了jquery框架的简单使用。于是用它实现简单的增删改，接着也用原始的javascript实现同样的功能，两者对比可以看出jquery的强大
js中script的上下放置区别，Dom的增删改创建操作实例分析
10-15
主要介绍了js中script的上下放置区别，Dom的增删改创建操作,结合实例形式分析了JavaScript基本dom事件、script在head和body中放置的区别、以及Dom的增删改创建等相关操作技巧,需要的朋友可以参考下
js表格操作，DOM实现数据动态增删查改
12-02
原生JavaScript，对数据表格进行操作，使用DOM实现数据的动态操作，包括增加、删除、查询、修改。
超强 DOM增删改,js日历综合案例实现
03-21
wpCalendar.js 博文链接：https://javawangli.iteye.com/blog/965775
使用JavaScript+DOM实现的直接在HTML网页上进行增、删、查、改操作(附带分页)
sxpgog
03-18 221
     之前的学习过程中一直都是采用Java技术中的MVC模式对数据库数据进行的操作，这两天刚学习了JavaScript和HTML  DOM，感觉JS还是很强大的。于是编写了一个简单的管理系统，可直接利用JavaScript实现HTML页面数据的增、删、查、改操作，当然还有分页的。下面是代码实现：   &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4....
JavaScript Dom 案例-动态表格的添加和删除(一)
ontheroad1024的博客
12-18 1153
案例知识点关键字: Document,Node,Element,innerHTML,onclick 基本代码如下,这是一个目前只有HTML和CSS的的页面效果: 代码如下: Title <table> <caption>信息表</ca...
使用函数和DOM实现表格的增删查
weixin_44200575的博客
08-24 244
使用函数和DOM实现表格的增删改查使用函数和DOM实现表格的增删改查新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出...
3.使用原生js实现简单列表的增加、修改、删除
m0_52065154的博客
03-21 3815
1.描述 /* 事件委托: 本来该子元素的事情 交给父元素, 父元素接收到事件之后, 会找到触发的子元素，交给子元素处理 原理: 事件加给父元素 通过触发源(target、srcElement)找到子元素 优点: 1. 执行速度快 2. 子元素可以发生在未来 描述： 点击添加按钮，弹出一个文本输入框，将输入的值，添加到ul列表中 点击ul的时候 判断触发源的innerText （使用事件委托）
练习—增加，删除，替换dom元素(实例之增加，删除，替换列表元素)
weixin_51300999的博客
10-28 148
部分需要用到的方法 element.appendChild() 向元素添加新的子节点，作为最后一个子节点。 element.innerHTML 设置或返回元素的内容。 element.insertBefore() 在指定的已有的子节点之前插入新节 element.removeChild() 从元素中移除子节点。 element.replaceChild() 替换元素中的子节点。 document.creatTextNod..
DOM复习Day3———添加和删除
lass_huahua的博客
08-19 137
今日复习内容：元素的添加和删除 1.添加：可分为3步： ①创建一个空元素：var a =document.createElement("a") 注意：只能用document调用 ②给新元素添加内容或属性 例如： <a href="www.baidu.com"></a> a.innerHTML="click...
8.案例:DOM简单的增加删除学生信息
lazylYYY的博客
08-11 301
1.在table中添加新的tr时要注意,他俩之间还有一个tbody, 2.创建标签letnameTd=document.createElement('td') 3.添加元素A.appendChild(在A里面添加我); 4.创建超链接a标签 letlink=document.createElement('a'); link.href='javascript:;'; link.on...
使用DOM节点的动态添加和删除向表格中插入删除数据
yinghanhanhan的博客
12-09 909
在插入数据按钮的事件处理函数中，使用document对象的getElementById、getElementsByTagName等属性获取输入框的值。在删除超链接的事件处理函数中，获取超链接的父节点td，继续获取父节点tr，在获取父节点table，然后将table节点中的tr节点删除。在页面中添加文本输入框和选项菜单，并提示用户输入，添加插入数据按钮，并添加点击事件。绘制表格，添加四条虚拟数据，在每条数据后使用超链接，并且添加超链接的点击事件。点击插入数据按钮，将输入框中的数据插入到表格中。
JavaScript Dom 案例-动态表格的添加和删除
Ass12454548的博客
01-24 1136
JavaScript Dom 案例-动态表格的添加和删除
spring mvc + spring security 的权限拦截示例
热门推荐
尹小鱼的博客
12-19 1万+
      Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架。它提供了一组可以在Spring应用上下文中配置的Bean，充分利用了Spring IoC，DI（控制反转Inversion of Control ,DI:Dependency Injection 依赖注入）和AOP（面向切面编程）功能，为应用系统提供声明式的安全访问控制功...
javascriptdom学习
最新发布
07-20
对于学习 JavaScript DOM（文档对象模型），你可以按照以下步骤进行： 1. 先了解什么是DOM：DOM 是一种对 HTML 和 XML 文档的编程接口，它将文档解析成由节点和对象（如元素、属性和文本）组成的结构，开发者可以...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值