`
javawangli
  • 浏览: 224084 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

超强 DOM增删改,js日历综合案例实现

阅读更多

 DOM增删改,js日历综合案例实现

 

 

效果图:

  

 

 

      

 实现此图功能的源代码:

     Html代码:

    

<!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" id="div">

<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" onclick="select1(1)"/>

   </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>

 

 

 

Java源代码

  

 

   

 

<!--EndFragment--><!--EndFragment-->

<script type="text/javascript">

     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";

           }

         

           }

     }

       function select1(oper){

        var arr=document.getElementsByName("chbk");

          for(var i=0;i<arr.length;i++){

            switch(oper){

              case 1:

               arr[i].checked=oper;

                break;

            }

        }

     

     }

</script>

 

日历控件wpCalendar.js

 

新建一个js文件 下载解压包,复制代码,。

 

 

 

<!--EndFragment-->

  • 大小: 62.7 KB
1
6
分享到:
评论

相关推荐

    04.dom增删改.html

    04.dom增删改.html

    js 日历 js日历 例子 javascript日历

    3. **逻辑**:JavaScript部分,实现日历的动态行为,如显示/隐藏日历,切换月份,选择日期等。 在描述中提到,示例代码可能支持两种编码格式:UTF-8和GBK。UTF-8是一种国际通用的字符编码标准,能表示世界上几乎...

    尚硅谷_教学课件_JavaScriptDOM

    在“尚硅谷_教学课件_JavaScriptDOM”中,我们可以期待学习到关于DOM的基本概念、DOM树的构建以及如何利用JavaScript操作DOM元素的方法。 首先,DOM(Document Object Model)是一种标准,它将网页内容表示为一个...

    htmljavascript增删改

    JavaScript还可以与服务器进行通信,利用Ajax(Asynchronous JavaScript and XML)技术实现数据的增删改。通过XMLHttpRequest或现代浏览器的fetch API,可以发送HTTP请求到服务器,更新数据库,并获取最新的数据。...

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

    本话题主要探讨如何利用原生JavaScript和DOM来实现数据表格中的动态增删查改功能,这对于前端开发来说是一项基本且重要的技能。 1. **创建数据表格** - 使用`&lt;table&gt;`元素创建表格结构,包括`&lt;thead&gt;`定义表头,`...

    SSH实现基本的增删改

    在这个场景中,我们将深入探讨SSH框架如何实现基本的增删改操作,并结合页面美化和数据校验来提升用户体验。 首先,让我们从Struts2开始,这是一个基于MVC设计模式的Action驱动框架,负责处理用户请求并转发到相应...

    jquery写的增删改

    标题"jquery写的增删改"指的是使用 jQuery 实现的数据表或列表的动态操作,即添加(Add)、删除(Delete)和修改(Modify)功能。这些功能在网页应用中十分常见,特别是在处理用户交互和数据管理时。 jQuery 提供了...

    html+css+js表格动态增删改与xml加载与保存

    在本项目"html+css+js表格动态增删改与xml加载与保存"中,我们将深入探讨如何利用这些技术实现一个功能丰富的表格应用。 首先,HTML(HyperText Markup Language)用于定义页面的基本结构。在创建动态表格时,我们...

    DOM对标签的增删改

    标题中的“DOM对标签的增删改”指的是在Web开发中使用Document Object Model(DOM)来操作HTML或XML文档中的元素。DOM是一种编程接口,它允许开发者通过JavaScript或其他支持的语言来动态更新、添加和删除页面内容。...

    js日历 12种js日历

    在这个主题中,我们主要关注的是“js日历 12种js日历”,这显然是一份包含了多种不同实现方式的JavaScript日历组件集合。 1. **日历组件的基本概念** 日历组件是网页中常见的交互元素,它允许用户选择日期,通常...

    js和dom用法案例

    JavaScript 是一种轻量级的客户端脚本语言,常用于实现网页的交互性,而 DOM(Document Object Model)则是网页内容的一种结构化表示,允许 JavaScript 通过编程方式操作 HTML 或 XML 文档。 在 JavaScript 中,`F1...

    JavaScript dom操作 趣味案例

    本资源为JavaScript的dom操作的趣味案例,可直接打开查看本资源为JavaScript的dom操作的趣味案例,可直接打开查看本资源为JavaScript的dom操作的趣味案例,可直接打开查看本资源为JavaScript的dom操作的趣味案例,可...

    前端js商城购物车完整,增删改,单选商品

    在这个项目中,我们关注的是如何利用JavaScript实现购物车的增、删、改以及商品的单选操作,这些都是电商网站必备的功能。 首先,我们要理解JavaScript的基本语法和数据类型,它是ECMAScript的一个实现,提供了变量...

    html js脚本日历控件

    在提供的文件名中,"calendar.html"可能是包含日历控件的HTML页面,而"iptext.js"很可能是用来实现日历功能的JavaScript脚本。通过分析这两个文件,我们可以深入了解这个日历控件的具体实现细节,包括具体的DOM操作...

    jquery实现的无刷新分页增删改

    总结一下,这个“jquery实现的无刷新分页增删改”项目展示了如何利用jQuery的Ajax、DOM操作和事件处理功能,结合后台API,构建一个无需刷新整个页面即可进行数据操作的前端应用。这种技术在现代Web应用中十分常见,...

    Javascript_Dom操作案例

    在这个“Javascript_Dom操作案例”中,我们将深入探讨如何利用JavaScript有效地操纵DOM元素,提升用户体验并实现动态网页功能。 1. **DOM基本概念**: DOM是一种标准,用于表示HTML或XML文档的树形结构。每个节点...

    js实现日历组件,一行代码实现日历,并且实现可添加自定义记录

    总之,使用原生JavaScript实现日历组件是一种很好的实践,它可以帮助开发者提升对DOM操作、事件处理和日期对象的理解。而通过一行代码实现的这种高效方法,更是体现了JavaScript的灵活性和强大性。对于初学者来说,...

    通用WEB表格增删改操作(附源码)

    本教程将探讨如何实现通用的Web表格的增删改操作,包括前端交互与后端处理,以及提供源码以供参考。 一、前端交互 前端交互主要涉及到HTML表格的创建、JavaScript或jQuery对表格元素的操作,以及AJAX与后端服务器的...

Global site tag (gtag.js) - Google Analytics