javascript基础#DOM增删改练习 超级详细！基础简单

最新推荐文章于 2022-08-23 11:40:01 发布
最新推荐文章于 2022-08-23 11:40:01 发布
阅读量465 收藏 2
点赞数
分类专栏： javascript 文章标签： html css js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41306215/article/details/105464750
版权

 

   效果：实现增删改列表操作

  

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1#0">  
    <title>Document</title>  
    <style>  
        table{  
            border-collapse: collapse;  
            text-align: center;  
        }  
        table td,th,tr{  
            border: 1px solid #000;  
  
        }  
        #employeeTable td, #employeeTable th, #employeeTable tr{  
            width: 80px;  
            height: 30px;  
        }  
  
    </style>  
    <script type="text/javascript">{  
  
        //删除函数  
        function delA(){  
              
            var tr= this.parentNode.parentNode;    
            var name=tr.children[0].innerHTML;          
            var flag=confirm("Are you sure to delece "+name+" ?");  
            if(flag){  
                tr.parentNode.removeChild(tr);  
            }  
                return false;  
                       
            }  
  
        window.onload=function(){  
            var a=document.getElementsByTagName("a");  
            for(var i=0;i<a.length;i++){  
                    a[i].onclick=delA;  
            }  
  
            //添加员工功能  
            /*  
            * -点击按钮，员工信息添加到表格  
            */  
            //为提交按钮绑定单击响应函数  
                var addEmpButton = document.getElementById("addEmpButton");  
                addEmpButton.onclick=function(){   
            //获取用户添加的员工信息  
            //获取员工的名字  
                var name = document.getElementById("empName").value;  
              
            //获取员工的年龄  
                var age = document.getElementById("age").value;  
  
            //获取员工的工资  
                var salary = document.getElementById("salary").value;  
                  
                //获取的信息保存到tr中  
                /*<tr>  
                    <td>Ankry</td>  
                    <td>21</td>  
                    <td>10000</td>  
                    <td><a href="deleteEmp?id=001">Delect</a></td>  
                </tr>*/  
  
                var tr=document.createElement("tr");  
                tr.innerHTML="<td>"+name+"</td>"+  
                             "<td>"+age+"</td>"+  
                             "<td>"+salary+"</td>"+  
                             "<td><a href='javascript:;'>Delect</a></td>";  
                //获取刚刚添加的a元素，并为其绑定单机响应函数  
                var a=tr.getElementsByTagName("a")[0];  
                a.onclick=delA;  
  
                //太繁琐↓↓↓  
                // var tr=document.createElement("tr");  
  
                // var nameTd=document.createElement("td");  
                // var ageTd=document.createElement("td");  
                // var salaryTd=document.createElement("td");  
                // var aTd=document.createElement("td");  
  
                // var a=document.createElement("a");  
  
                // //创建文本节点  
                // var nameText=document.createTextNode(name);  
                // var ageText=document.createTextNode(age);  
                // var salaryText=document.createTextNode(salary);  
                // var delText=document.createTextNode("Delect");  
  
                // //将文本添加到td中  
                // nameTd.appendChild(nameText);  
                // ageTd.appendChild(ageText);  
                // salaryTd.appendChild(salaryText);  
  
                // //向a中添加文本和td中  
                // a.appendChild(delText);  
                // aTd.appendChild(a);  
                // //向a中添加属性  
                // a.href="javascript:;";  
                // //为新添加的a再绑定一次单击响应函数  
                // a.onclick=delA;  
  
  
                // //将td添加到tr中  
                // tr.appendChild(nameTd);  
                // tr.appendChild(ageTd);  
                // tr.appendChild(salaryTd);  
                // tr.appendChild(aTd);  
  
                //获取table  
                var employeeTable=document.getElementById("employeeTable");  
                employeeTable.appendChild(tr);  
  
                //获取employeeTable中的tbody  
                var tbody=employeeTable.getElementsByTagName("tbody")[0];  
                tbody.appendChild(tr);  
  
                //以下的有隐患  
                // tbody.innerHTML+="<tr>"+  
                //             "<td>"+name+"</td>"+  
                //             "<td>"+age+"</td>"+  
                //             "<td>"+salary+"</td>"+  
                //             "<td><a href='javascript:;'>Delect</a></td>"  
                // +"</tr>";  
            };  
  
  
  
  
            };  
    }  
              
          
  
    </script>  
</head>  
<body>  
    <div class="table">  
        <table id="employeeTable">  
            <tr>  
                <th>NAME</th>  
                <th>AGE</th>  
                <th>SALARY</th>  
                <th> </th>  
            </tr>  
            <tr>  
                <td>Ankry</td>  
                <td>21</td>  
                <td>10000</td>  
                <td><a href="deleteEmp?id=001">Delect</a></td>  
            </tr>  
            <tr>  
                <td>Vicky</td>  
                <td>23</td>  
                <td>10000</td>  
                <td><a href="deleteEmp?id=002">Delect</a></td>  
            </tr>  
            <tr>  
                <td>Minline</td>  
                <td>24</td>  
                <td>11000</td>  
                <td><a href="deleteEmp?id=003">Delect</a></td>  
            </tr>  
        </table>  
    </div>  
    <div class="formDiv">  
        <h2>Creat A New Staff</h2>  
        <table>  
            <tr>  
                <td class="word">name: </td>  
                <td class="inp">  
                    <input type="text" name="empName" id="empName" />   
                </td>  
            </tr>  
            <tr>  
                <td class="word">age: </td>  
                <td class="inp">  
                    <input type="text" name="age" id="age" />   
                </td>  
            </tr>  
                <td class="word">salary: </td>  
                <td class="inp">  
                    <input type="text" name="salary" id="salary" />   
            </td>  
            <tr>  
                <td colspan="2" align="center">  
                    <button id="addEmpButton" value="abc">Submit</button>  
                </td>  
            </tr>  
        </table>  
    </div>   
</body>  
</html>

 

Ankry果冻
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM增删改查练习
沉梦昂志
07-10 285
练习一 效果图 heml代码 <!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>Untitled Document</
js基础——DOM增删改练习
jwz934738949的博客
09-02 545
confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。如果访问者点击"确定"，此方法返回true，否则返回false。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM增删改练习</title&gt...
关于DOM操作-增删改查的练习
weixiwo的博客
05-09 712
时隔两个多月，终于学到了DOM操作，下面是个人做的一个练习，适合新手小白 在网页中，html标签，属性，文本，注释，整个文档都是节点 而document文档节点，代表整个网页document,可以获取任意对象 首先我们要了解dom，是如何获取元素节点的 1.getElementById()通过id获取节点 html代码 <button type="button" id="btn">我是一个按钮</button> js代码 var btn=document.getElementByI
使用dom元素和jquery元素实现简单增删改的练习
09-06 157
软件开发实际就是数据的增删改查，javascript前端开发也不例外。今天学了jquery框架的简单使用。于是用它实现简单的增删改，接着也用原始的javascript实现同样的功能，以便看出jquery的强大： 代码如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &...
js DOM增删改方法以及练习(二)
FemaleHacker的博客
01-18 350
文章目录js DOM增删改方法以及练习DOM增删改方法总结DOM增删改方法大练习效果图 js DOM增删改方法以及练习 DOM增删改方法总结 DOM增删改方法大练习 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>js</title> <style> *{ margin:0px; padding: 0
JS对HTML表格进行增删改操作
10-21
在本文中，我们将深入探讨如何使用JavaScript（JS）来实现对HTML表格的增删改操作。这个话题对于前端开发者来说非常实用，因为它涉及到网页动态交互和数据管理的基础知识。我们将从以下几个方面进行详细讲解： 1. *...
Champagne-Cocktail:TELERIK-ACADEMY-JS-UI&DOM-2015-TEAMWORK
07-17
4. **DOM操作**：如何使用`document.getElementById`, `querySelector`, `querySelectorAll`等方法选取元素，以及`appendChild`, `removeChild`, `innerHTML`等方法对DOM进行增删改。 5. **CSS操作**：通过...
d3-labs:Simulation and Visualization D3模块的练习
04-19
3. 进行数据操作：利用`.enter()`, `.exit()`, `.update()`选择器处理数据的增删改。 4. 创建SVG元素：使用`append()`和`attr()`添加并设置SVG元素属性。 5. 图表布局：理解不同类型的图表布局，如堆叠布局、分组...
D3挑战：MN数据可视化和分析专业：D3家庭作业＃16-数据新闻和D3（使用Git Main）
02-13
3. **进入(Enter)，更新(Update)，退出(Exit)**：这三个阶段用于处理数据变化时DOM的增删改，确保可视化始终保持同步。 4. **转换(Transitions)**：D3.js的过渡功能使得动画和平滑变化成为可能，提升用户体验。 5....
任务列表：使用JavaScript，HTML和CSS创建的任务列表
02-17
在IT领域，构建一个任务列表应用是初学者和专业开发者都常见的练习，它能帮助我们理解和实践前端开发的基础技术。本项目聚焦于使用JavaScript、HTML和CSS这三种核心技术来创建一个本地存储支持的任务列表。接下来，...
JavaScript 实现HTML DOM增删改查操作的常见方法详解
10-15
主要介绍了JavaScript 实现HTML DOM增删改查操作,结合实例形式分析了JavaScript针对HTML DOM元素增删改查常见操作技巧与使用注意事项,需要的朋友可以参考下
DOM对标签的增删改
08-09
NULL 博文链接：https://421728862.iteye.com/blog/2186616
js+html写的实现表格的动态增删改查和表单验证
08-04
js+html写的实现表格的动态增删改查和表单验证
【JavaScript】DOM增删改练习
苏凉.py的博客
07-06 473
DOM增删改！！
一个使用 DOM 进行增删改的练习
WXY19990803的博客
03-05 227
实现员工删除的操作： <!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
js基础-dom增删改练习
不闻钟的博客
05-16 219
<!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>dom
js DOM增删改方法以及练习(三)--练习实例
FemaleHacker的博客
01-25 170
文章目录js DOM增删改实例要求实现代码实现效果 js DOM增删改实例 要求 1.点击超链接后删除员工信息 2.点击submit添加新的员工信息到上面表格 实现代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>js</title> <style> </style> <script typ
dom的增删改、练习从左到右和从右到左、动态添加和删除行记录
weixin_46065214的博客
08-23 254
dom的增删改、练习从左到右和从右到左、动态添加和删除行记录
js初级练习2（增删改）
weixin_30615767的博客
11-17 62
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <titl...
JavaScript基础：DOM解析与事件驱动
"JavaScript基础, DOM文档对象模型, 初学者指南" JavaScript是一种广泛应用于网页和网络应用的脚本语言，它是ECMAScript标准的一种实现，虽然名字中包含"Java"，但两者并无直接关联。JavaScript设计的核心目的是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值