"原生js实现增删改查操作" 资源-CSDN下载

共3个文件

html：2个

js：1个

1星需积分: 50 106 浏览量 2018-12-18 21:07:57 上传评论 2 收藏 4KB ZIP 举报

在Web开发中，JavaScript是一种必不可少的脚本语言，主要用于客户端的交互和动态更新内容。"js实现增删改查"是指使用JavaScript来实现数据库或数据集合中的基本操作：添加（Add）、删除（Delete）、修改（Update）和查询（Query）。在网页应用中，这些功能对于用户界面的实时性和用户体验至关重要。以下将详细介绍如何使用原生JavaScript来实现这些操作。 **一、添加（Add）** 在JavaScript中，添加新数据通常涉及操作数组或对象。如果数据存储在数组中，可以使用`push()`方法将新元素添加到数组末尾，或者使用`unshift()`方法将其添加到数组开头。如果是对象集合，可以创建一个新的对象并将其添加到对象数组中，或者直接更新现有的对象属性。例如： ```javascript let data = [/* 存储已有数据的数组 */]; function add(item) { data.push(item); } // 调用函数添加新数据 add({id: 1, name: '新数据'}); ``` **二、删除（Delete）** 删除数据通常涉及从数组或对象集合中移除特定项。在数组中，可以使用`splice()`方法根据索引删除元素，或使用`filter()`方法根据条件过滤出不需删除的元素。对于对象集合，可以通过遍历并比较属性来删除特定的对象。例如： ```javascript function deleteById(id) { data = data.filter(item => item.id !== id); } ``` **三、修改（Update）** 修改数据是找到特定项并更新其属性。对于数组，可以遍历找到目标项，然后更新其属性。对于对象集合，同样需要遍历查找目标对象，然后修改相应属性。例如： ```javascript function updateById(id, updatedItem) { for (let i = 0; i < data.length; i++) { if (data[i].id === id) { data[i] = {...data[i], ...updatedItem}; break; } } } ``` **四、查询（Query）** 查询数据通常涉及根据某些条件筛选出匹配的项。可以使用`filter()`、`find()`或`findIndex()`等数组方法来实现。对于对象集合，可能需要遍历整个集合以找到满足条件的项。例如： ```javascript function findById(id) { return data.find(item => item.id === id); } ``` 在实际项目中，这些操作往往与DOM（文档对象模型）操作结合，以实现用户界面的动态更新。例如，当添加、删除或修改数据时，可能需要在页面上即时反映这些变化。这通常涉及选择元素、创建或删除DOM节点、以及更新节点内容。附带多样效果可能包括动画过渡、数据验证、异步处理（如使用Ajax与服务器通信）等。压缩包中的"增删改查"可能包含示例代码和说明，帮助开发者更好地理解和实现这些功能。 JavaScript的增删改查操作是Web开发中的基础技能，对于构建交互丰富的网页应用至关重要。熟练掌握这些操作能够提高开发效率，并提升用户对应用的满意度。

资源推荐

资源详情

资源评论

收起资源包目录

增删改查.zip （3个子文件）

增删改查

public.js 2KB

增删该查.html 4KB

000000000000000000点菜器.html 3KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .layer{ width: 300px; height: 300px; background-color: orange; position: fixed; left: 50%; top: 50%; margin-left: -150px; margin-top: -150px; display: none; } th{ height: 50px; width: 100px; } </style> </head> <body> <table border="1"> <thead> <tr> <th>用户名</th> <th>密码</th> <th><button id="add">增加</button></th> </tr> </thead> <tbody> </tbody> </table> <div class="layer"> <div>用户名: <input type="text" id="username"></div> <div>密码: <input type="text" id="userpwd"></div> <div> <input type="button" id="cancel" value="取消"> <input type="button" id="save" value="保存"> </div> </div> <script src="../public.js"></script> <script> //querySelector返回一个节点 //querySelectorAll返回一个数组 var add=document.querySelector("#add"); var layer=document.querySelector(".layer"); var cancel=document.querySelector("#cancel"); var save=document.querySelector("#save"); var username=document.querySelector("#username"); var userpwd=document.querySelector("#userpwd"); var tbody=document.getElementsByTagName('tbody')[0]; var flag; var curTr; add.onclick=function(){ layer.style.display="block"; username.value=""; userpwd.value=""; flag=true; } //点击取消,将layer隐藏 cancel.onclick=function(){ layer.style.display="none"; } //点击保存,进行保存操作 save.onclick=function(){ layer.style.display="none"; //获取用户名和密码 var nameValue=username.value; var pwdValue=userpwd.value; if (flag) { addUser(nameValue,pwdValue); }else{ update(curTr); } } function addUser(name,pwd){ //拼接到tbody里面 //创建一个tr节点 var tr=document.createElement("tr"); //创建td节点,存用户名,创建的文本节点 var nameTd=document.createElement("td"); var nameNode=document.createTextNode(name); nameTd.appendChild(nameNode); tr.appendChild(nameTd); var pwdTd=document.createElement("td"); var pwdNode=document.createTextNode(pwd); pwdTd.appendChild(pwdNode); tr.appendChild(pwdTd); //操作按钮 var controlTd=document.createElement("td"); var delBtn=document.createElement("button"); var delValue=document.createTextNode("删除"); delBtn.appendChild(delValue); //给delBtn添加删除事件 delBtn.onclick=function(){ tbody.removeChild(tr); } var updateBtn=document.createElement("button"); var updateValue=document.createTextNode("修改"); updateBtn.appendChild(updateValue); //点击修改 updateBtn.onclick=function(){ layer.style.display="block"; flag=false; //点击修改的时候还是调用 curTr=this.parentNode.parentNode; //获取当前行的name和pwd var nameValue=curTr.children[0].innerHTML; var pwdValue=curTr.children[1].innerHTML; username.value=nameValue; userpwd.value=pwdValue; } controlTd.appendChild(delBtn); controlTd.appendChild(updateBtn); tr.appendChild(controlTd); tbody.appendChild(tr); } /* cur是当前点击的行 */ function update(cur){ console.log("修改"); //获取到新值 var newName=username.value; var newPwd=userpwd.value; cur.children[0].innerHTML=newName; cur.children[1].innerHTML=newPwd; } </script> </body> </html>

评论收藏

内容反馈