<!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. JQ 获取单选按钮选中的值

    ==========================html 代码 <input type="radio" style="float: left " on ...

  2. js 去除空格

    var MAX_PERIOD = $('#MAX_PERIOD').val(); // 借款的最大期限 MAX_PERIOD=Trim(MAX_PERIOD,"g");   //带 ...

  3. yii2多语言

    1.页面视图(我放在了布局文件main.php中): <a href="javascript:;" onclick="changeLanguage('zh-CN') ...

  4. php使用过滤器filter_var轻松验证邮箱url和ip地址等

    以前使用php的时候还不知道有过滤器filter这玩意,那时候判断邮箱.url和ip地址格式是否符合都是用正则表达式.后来随着使用的逐渐深入,才知道在php中也可以使用内置的函数库过滤器filter来 ...

  5. kernel32.dll出错解决方案

    kernel32.dll 一.什么是kernel32内核文件 kernel32.dll是Windows 9x/Me中非常重要的32位动态链接库文件,属于内核级文件.它控制着系统的内存管理.数据的输入输 ...

  6. Swift 注释

    注释就是对代码的解释和说明.目的是为了让别人和自己很容易看懂.为了让别人一看就知道这段代码是做什么用的. 正确的程序注释一般包括序言性注释和功能性注释.序言性注释的主要内容包括模块的接口.数据的描述和 ...

  7. EL表达式,JSTL：jsp standard Tag Library

    1.EL表达式的作用: 1.1访问Bean的属性.  方式一:${对象名 . 属性名} eg:${user.name}    方式二:${对象名["属性名"]} 1.2输出简单的运 ...

  8. iOS的通知Notification

    这里是不同的对象之间的通知, 不是本地通知. 一开始玩, 很挠头, 后来发现原来只是对象init的过程出了问题. 首先, 新建一个简单的单controller的工程. 然后打开它的ViewContro ...

  9. Windows cmd 颜色，字体，color font set up

    windows的cmds默认的字体很丑,丑的不认直视,『如花』一般. 但是总有用到的时候 这是我有优化的一种结果,怎么来弄呢 要字体颜色漂亮,先要在注册表的Console中注册你要使用的字体,这个至关 ...

  10. PHP stat() 函数 返回关于文件的信息。

    定义和用法 stat() 函数返回关于文件的信息. 语法 fstat(file) 参数 描述 file 必需.规定要检查的文件. 说明 获取由 file 指定的文件的统计信息.如果 file 是符号连 ...