<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type ="text/css">

        *{ margin:0px; padding:0px;}

        #menu li{ width:50px; height:40px; margin-left:2px; text-align:center;

                   list-style:none; line-height:40px;     background-color:Green; float:left;}

           #msg{ width:90px; height:20px; border:solid 1px red; line-height:20px; text-align:center;}

    </style>

    <script type ="text/javascript">

        function chekcPwd(v) {

            var s = v.value;

            s = s.toUpperCase();

            var a = ;var b = ;var  cd = ; //计数器

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

                var c = s.charCodeAt(i);

                if (c >=  && c <= ) {

                    a=;//字母

                }

                else if (c >=  && c <= )

                 {

                     b=;//数字

                 }

                else {

                     cd=; //其它字符

                }

             }

             var d = document.getElementById("msg");

             if (a + b + cd == ) {

                 d.innerHTML = "强".fontcolor("red") ;

             }

             else if (a + b + cd == ) {

             d.innerHTML = "中".fontcolor("yellow");

             }

             else {

             d.innerHTML = "弱".fontcolor("red");

             }

        }

    </script>

    <script type ="text/javascript">

        function overImg(v) {

            var i = ;

            var si = setInterval(function () {

                i += ;

                v.height = i;

                if (i >= ) {

                    clearInterval(si);

                }

            }, );

        }

    </script>

    <script type ="text/javascript">

        function $(id) {

            return document.getElementById(id);

        }

        function c(n)

        {

            return document.createElement(n);

        }

        var currentEditTr = null;//目前正在编辑的行

        function addData() {

            var n = $("name").value;

            var list = $("list");

            var td =c("td");

            var tr =c("tr");

            var td2 = c("td");

            var delInput = c("input");

            var editInput = c("input");

            delInput.type = "button";

            delInput.value = "删除";

            delInput.onclick = function () {

                // alert(1);

                if (confirm("确定删除吗?")) {

                    list.tBodies[].removeChild(tr);

                    alert("成功!!!");

                }

            };

            editInput.type = "button";

            editInput.value = "编辑";

            editInput.onclick = function () {

                $("name").value = tr.childNodes[].innerHTML;

                currentEditTr = tr;

            };

            td2.appendChild(delInput);

            td2.appendChild(editInput);

            td.innerHTML = n;

            tr.appendChild(td);

            tr.appendChild(td2);

            list.tBodies[].appendChild(tr);

        }

        function updateData() {

            var n = $("name").value;

            if (currentEditTr != null) {

                //有编辑的项

                currentEditTr.childNodes[].innerHTML = n;

            }

        }

    </script>

</head>

<body>

<ul id="menu">

<li>网页</li>

<li>MP3</li>

<li>视频</li>

<li>图片</li>

</ul>

<table>

    <tr>

        <td width=""   height="" style=" text-align:center; vertical-align:bottom;">

            内容

        </td>

    </tr>

</table>

<input type="password" onkeyup="chekcPwd(this)"  /><div id="msg"></div>

    <img src="data:images/114.jpg" height="" onmouseover="overImg(this)" />

    <table id="list" border="">

    <tr>

        <th>姓名 </th><th>操作</th>

    </tr>

    </table>

    <input type ="text" id="name" />

    <input type ="button" value="新增" onclick="addData()" />

    <input type="button" value="修改" onclick="updateData()" />

</body>

</html>

JQuery增删改查的更多相关文章

  1. jQuery调用WebService实现增删改查的实现

    第一篇博客,发下我自己写的jQuery调用WebService实现增删改查的实现. 1 <!DOCTYPE html> 2 3 <html xmlns="http://ww ...

  2. MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查

    MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查 本文的目的:   1.MVC3项目简单配置EF code first生成并初始化数据 ...

  3. JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能

    JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> &l ...

  4. jQuery EasyUI/TopJUI实现数据表格的增删改查功能（不写js,纯HTML实现!!!）

    jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...

  5. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（9）-MVC与EasyUI结合增删改查

    系列目录 文章于2016-12-17日重写 在第八讲中,我们已经做到了怎么样分页.这一讲主要讲增删改查.第六讲的代码已经给出,里面包含了增删改,大家可以下载下来看下. 这讲主要是,制作漂亮的工具栏,虽 ...

  6. JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）

    前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue ...

  7. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（一）

    前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...

  8. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（四）：自定义T4模板快速生成页面

    前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...

  9. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（三）：两个Viewmodel搞定增删改查

    前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打 ...

随机推荐

  1. 17---Net基础加强

    更新中,敬请期待............ 复习 将xml显示到treeview 修改增加 删除 foreach原理 深拷贝与浅拷贝 模拟数据库及登陆 复习总结

  2. 存储区更新、插入或删除语句影响到了意外的行数(0)。实体在加载后可能被修改或删除。刷新 ObjectStateManager 项。

    在用asp.net MVC3 的MusicStore时候 Edit某个数据项时提示下面的错误: 存储区更新.插入或删除语句影响到了意外的行数(0).实体在加载后可能被修改或删除.刷新 ObjectSt ...

  3. Ubuntu + CentOS7 搭建tftp Server

    基于Ubuntu系统做的tftp服务器,基于CentOS 7都差不多,书写了关键命令,测试过Ubuntu 12.0.4 和CentOS 7环境 1.介绍tftp服务器     TFTP(Trivial ...

  4. 我的代码观——关于ACM编程风格与librazy网友的对话

    序 在拙文 <高手看了,感觉惨不忍睹——关于“[ACM]杭电ACM题一直WA求高手看看代码”>中,我对ACMer们的一些代码“惯例”发表了我的看法, librazy网友在评论中给出了他的一 ...

  5. 【Winfrom】简单的焦点设置问题

    原文: http://blog.csdn.net/zlwzlwzlw/article/details/8573921 初始的时候希望指定控件的焦点 不能用load事件 要用Activated事件才行 ...

  6. :not(selector)

    描述: 用于筛选的选择器 查找所有未选中的 input 元素 HTML 代码: <input name="apple" /> <input name=" ...

  7. iOS OC与swift相互调用

    小哥("我"的自称)个人混编的时候喜欢先创建OC项目,然后在项目中创建swift类.这样有个好处就是桥文件可以自动创建的同事路径不需要我手动去写了,另外还有个目的就是现在小哥自我感 ...

  8. （转载）CSV 文件处理 PERL

    http://cn.perlmaven.com/how-to-read-a-csv-file-using-perl http://search.cpan.org/~hmbrand/Text-CSV_X ...

  9. get/post方式调用http接口

    http://www.cnblogs.com/java-pan/tag/HTTP/ http://www.cnblogs.com/snoopylovefiona/p/4730242.html(可做参考 ...

  10. [UML]转：UML类图集中关系的总结

    转:http://blog.csdn.net/dragonpeng2008/article/details/6836448 在UML类图中,常见的有以下几种关系: 泛化(Generalization) ...