`

javascript实现添加删除修改数据

阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>addUser.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">


<script type="text/javascript" src="../js/wpCalendar.js">
</script>

</head>

<body>
<div align="center">
<h1>
显示有的用户界面
</h1>

<div style="border: 1px red solid;margin-bottom: 100px; padding: 10px 10%">

<table border="1px" cellpadding="0" cellspacing="0" id="tusers">
<thead>
<tr>
   <th>
      <input type="checkbox" name="chbk" id="chbk1"/>
   </th>
<th>
名称
</th>
<th>
性别
</th>
<th>
邮箱
</th>
<th>
出生日期
</th>
<th>
   操作
</th>
</tr>
           </thead>
           <tbody id="users">
          
           </tbody>
</table>

</div>

<div style="border: 1px blue solid;">
<form>
<table id="divs">
<tbody id="addUsers">
<tr>
<td>
用户名:
</td>
<td>
<input type="text" name="name" id="name" />
</td>
</tr>
<tr>
<td>
性别:
</td>
<td>
<select id="sex">
<option value="男">

</option>
<option value="女">

</option>
</select>
</td>
</tr>

<tr>
<td>
邮箱:
</td>
<td>
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td>
出生日期:
</td>
<td>
<input type="text" id="bir" name="bir" />
<input type=button value="点击看我"
onclick="showCalendar(this,document.all.bir)">
</td>
</tr>

<tr id="addu">
<td colspan="2">
<input type="button" value="添加" onClick="addUser()" id="add"/>
</td>
</tr>

<tr id="addu1">
<td colspan="2">
<input type="button" value="修改"  id="upduser"/>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</body>
</html>


<script>
     window.onload = function (){
        document.getElementById("addu1").style.display="none";
     }
    
     function addUser(){
          var name = document.getElementById("name").value;
          var sex = document.getElementById("sex").value;
          var email = document.getElementById("email").value;
          var bir = document.getElementById("bir").value;
         
         
         
          //获取表格节点对象
           var tusers = document.getElementById("tusers");
       
         //创建行
         var tr1 = document.createElement("tr");
         var cbk = document.createElement("td");
         var tname = document.createElement("td");
         var tsex = document.createElement("td");
         var temail = document.createElement("td");
         var tbir = document.createElement("td");
         var toper = document.createElement("td");
        
 
         var cbk1 = document.createElement("input");
         cbk1.setAttribute("type","checkbox");
         cbk1.setAttribute("name","chbk");
        
         cbk.appendChild(cbk1);
         tname.appendChild(document.createTextNode(name));
         tsex.appendChild(document.createTextNode(sex));
         temail.appendChild(document.createTextNode(email));
         tbir.appendChild(document.createTextNode(bir));
         var adelete = document.createElement("a");
         var aupdate = document.createElement("a");
        
         adelete.setAttribute("href","#");
         aupdate.setAttribute("href","#");
        
         adelete.appendChild(document.createTextNode("删除 |"));
         aupdate.appendChild(document.createTextNode("修改"));
         toper.appendChild(adelete);
         toper.appendChild(aupdate)
      
        
        //往行中添加
        tr1.appendChild(cbk);
        tr1.appendChild(tname);
        tr1.appendChild(tsex);
        tr1.appendChild(temail);
        tr1.appendChild(tbir);
        tr1.appendChild(toper);
       
       var users =  document.getElementById("users");
       users.appendChild(tr1);
       tusers.appendChild(users);
      
      
          //删除操作
          adelete.onclick = function(){
             users.removeChild(adelete.parentNode.parentNode);
          }
         
      
          //修改操作
          aupdate.onclick = function(){
               document.getElementById("addu").style.display="none";
               document.getElementById("addu1").style.display="block";
              
           var utr = aupdate.parentNode.parentNode;
           var utrs= utr.childNodes;
          
           document.getElementById("name").value=utrs[1].innerHTML;
           document.getElementById("sex").value=utrs[2].innerHTML;
           document.getElementById("email").value=utrs[3].innerHTML;
           document.getElementById("bir").value=utrs[4].innerHTML;
          
           var upUser = document.getElementById("upduser");
          
           upUser.onclick = function(){
           utr.childNodes[1].innerHTML = document.getElementById("name").value;
           utr.childNodes[2].innerHTML = document.getElementById("sex").value;
           utr.childNodes[3].innerHTML = document.getElementById("email").value
           utr.childNodes[4].innerHTML = document.getElementById("bir").value
           document.getElementById("addu1").style.display="none";
           document.getElementById("addu").style.display="block";
           }
        
           }
          
          
         
        
    
   
     }
</script>
分享到:
评论

相关推荐

    javascript实现表格添加删除等操作

    这个案例主要涉及了如何使用JavaScript来实现表格的添加、删除等基本操作。这些功能对于网页交互性和用户体验有着重要的作用,尤其适合初学者进行学习和实践。 首先,`students.html`文件很可能是用来展示表格结构...

    bootstrapTable实现表格内数据的添加、删除、修改、查询

    bootstrapTable实现表格内数据的添加、删除、修改、查询

    JavaScript动态添加删除表格行

    这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具",我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中,`&lt;table&gt;`元素用于创建...

    表格数据添加删除修改代码.rar_-baijiahao_shoute9a_表格数据添加删除修改代码

    这个"表格数据添加删除修改代码.rar"资源提供了一种基于jQuery的JavaScript解决方案,适用于那些希望在网页上实现动态交互表格功能的开发者。jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理和Ajax交互...

    javascript动态添加表格数据行

    在JavaScript编程中,动态添加表格数据行是一种常见的需求,特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录,提高了用户体验。在这个例子中,我们将探讨如何利用...

    Ajax实现无刷新添加和删除数据

    本主题将详细介绍如何利用Ajax实现无刷新添加和删除数据。 一、Ajax基本原理 Ajax的核心是JavaScript对象XMLHttpRequest,它允许在页面不重新加载的情况下与服务器交换数据并局部更新页面。通过创建XMLHttpRequest...

    asp+jquery ajax实例源码,添加,删除,修改,分页

    5. **修改数据** - 当用户编辑表单字段并保存时,前端使用AJAX发送PUT请求,包含修改后的数据。 - ASP接收请求,用新的数据更新数据库中的记录,返回更新成功的信息。 6. **分页功能** - 分页通常涉及服务器端的...

    纯js的树形菜单(添加删除节点)

    总的来说,实现"纯js的树形菜单(添加删除节点)"涉及到JavaScript基础、DOM操作、jQuery库的使用,以及事件处理等多方面技能。通过这样的练习,开发者可以提升对Web前端开发的理解,尤其是动态数据展示和交互设计的...

    【JavaScript源代码】js实现添加删除表格操作.docx

    这段代码展示了如何根据用户操作动态地修改表格,实现了添加、删除行,以及全选和单选复选框的同步。理解并掌握这些基本操作对于JavaScript开发者来说至关重要,因为它们构成了动态网页应用的基础。

    js表格操作,DOM实现数据动态增删查改

    6. **修改数据**:当用户编辑表格中的数据时,可以监听`input`事件或`change`事件来捕获修改。然后,更新对应的数组项,并同步更新表格显示。这可能需要找到对应的`&lt;td&gt;`元素并修改其内容。 7. **事件处理**:在...

    aspnet商品部分添加删除代码

    总的来说,"aspnet商品部分添加删除代码"涉及到ASP.NET Web Forms或MVC框架的使用,数据库操作,以及前端交互设计。开发者需要掌握C#或VB.NET编程,了解数据库设计和ADO.NET,同时熟悉HTML、CSS和JavaScript,以构建...

    JS动态添加删除HTML元素(实例)

    动态添加删除 HTML 元素是前端开发中常见的需求之一,今天我们来探讨如何使用 JavaScript 实现动态添加删除 HTML 元素的实例。 首先,让我们了解一下 HTML 文档对象模型(DOM),它是 HTML 文档的树形结构表示,...

    动态添加/删除表格行并提交内容到后台

    在开发Web应用时,动态添加和删除表格行是常见的需求,尤其在数据管理或表单填写场景中。本文将深入探讨如何使用C#后端和JavaScript前端技术来实现这一功能,为初学者提供一个基础的实践指导。 首先,我们要了解...

    js 读取 添加 删除 修改 Access数据库 完整例子

    在Web应用程序中,如果你的目标用户主要使用IE浏览器,你可以利用JavaScript的ActiveXObject来实现对Access数据库的读取、添加、删除和修改操作。以下是对这些操作的详细说明: 1. **连接Access数据库**: - 首先...

    JavaScript数组,JSON对象实现动态添加、修改、删除功能示例

    在本示例中,我们将探讨如何使用JavaScript操作数组和JSON对象,以实现动态添加、修改和删除数据的功能。具体来说,通过JavaScript的内建方法来操作JSON对象的数组,能够灵活地处理JSON数据结构,这对于开发动态网页...

    JavaScript实现Array(数组)和Map

    此外,JavaScript提供了一系列内置方法来操作数组,如push()用于在数组末尾添加元素,pop()用于移除末尾元素,slice()用于提取数组的一部分,concat()用于连接两个或多个数组,以及map()、filter()、reduce()等用于...

    jQuery数据列表新增或修改删除代码

    三、修改数据 1. 选择目标列表项:使用jQuery选择器找到要修改的`&lt;li&gt;`元素,例如: ```javascript var oldData = "数据2"; $("#dataList li:contains("+oldData+")").first(); ``` 2. 修改内容:通过`.html()`或`...

    javascript动态添加、修改、删除对象的属性与方法详解

    在JavaScript中,对象的属性和方法可以在运行时动态添加、修改和删除,这与其他静态类型语言有着显著的不同。动态操作对象的能力,提供了极大的编程灵活性,使得在不重新编译和重新实例化的情况下,就能根据需要改变...

    layui添加修改删除

    在“layui添加修改删除”这个主题中,我们将深入探讨如何使用layui实现数据表格的基本操作,包括添加、修改和删除功能。 首先,layui的数据表格(layui table)是其核心组件之一,用于展示数据并进行交互。要创建一...

    用javascript实现的留言板模块

    1. **DOM操作**:JavaScript通过Document Object Model (DOM) API与网页内容交互,添加、删除或修改HTML元素,实现留言的输入、显示和删除功能。 2. **AJAX异步通信**:使用XMLHttpRequest对象进行异步数据传输,...

Global site tag (gtag.js) - Google Analytics