<!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. 夺命雷公狗---linux之红帽的安装

    夺命雷公狗分享的第二套安装linux方法是RadHad的安装方法,,, 点击然后就自动重启了

  2. Report launcher to run SSRS report subscriptions on demand

    http://www.mssqltips.com/sqlservertip/3078/report-launcher-to-run-ssrs-report-subscriptions-on-deman ...

  3. 161122、BOM 操作写法示例

    浏览器相关信息 // 浏览器信息 navigator.userAgent // Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/ ...

  4. kvm虚拟机virt-manager启动报错

    安装kvm,用virt-manager启动时报错如下: Traceback (most recent call last):  File "/usr/share/virt-manager/v ...

  5. 图解 交集（join）和 合并（union）

    假设我们有两张表. Table A 是左边的表. Table B 是右边的表. 其各有四条记录,其中有两条记录是相同的,如下所示: id name       id  name 1  Pirate   ...

  6. Redis 转

    Redis 简介 Redis实践 Redis命令总结

  7. iOS开发必备HUD(透明指示层)

    iOS开发必备HUD(透明指示层) 字数421 阅读2123 评论1 喜欢51 1.MBProgressHUD GitHub地址:https://github.com/jdg/MBProgressHU ...

  8. android中广告轮播图总结

    功能点:无限轮播.指示点跟随.点击响应.实现思路: 1.指示点跟随,指示点通过代码动态添加,数量由图片数量决定. 在viewpager的页面改变监听中,设置点的状态选择器enable,当前页时,set ...

  9. C# 添加.DLL 出错的解决方法

    解决方法:    1.     注册组件:       运行--cmd--regsvr32 dll的绝对路径名(例如: regsvr32  C:\bin\EFGateWayOfERP.dll) 如果注 ...

  10. Behavior Designer中的内置消息机制

    最近在用Behavior Designer,其中需要用到消息机制,看了一下其中自带了这套东西 注册 Owner.RegisterEvent<string>("Message&qu ...