<!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. 【PyQuery】PyQuery总结

    pyquery库是jQuery的Python实现,可以用于解析HTML网页内容, 官方文档地址是:http://packages.python.org/pyquery/. 二.使用方法 ? 1 fro ...

  2. 华为项目管理10大模板Excel版(可直接套用_非常实用)

    项目管理是管理学的一个分支学科 ,对项目管理的定义是:指在项目活动中运用专门的知识.技能.工具和方法,使项目能够在有限资源限定条件下,实现或超过设定的需求和期望的过程.项目管理是对一些与成功地达成一系 ...

  3. TI CC254x BLE教程 1

    约定, 第一次翻译这种东西, 专有名词的翻译原则还是不太清楚, 总之涉及有可能误解的词, 都用双语, 如果是简单的, 直接英文或者中文, 取决于我是否能找到中文合适的词来翻译. 何为BLE: 1. 是 ...

  4. javaWeb 使用jsp开发 if else 标签

    1.jsp页面调用代码 <t:choose> <t:when test="${user==null }">还没有登录</t:when> < ...

  5. 2.1：你的第一个AngularJS App

    本章,带你体验一个简单的开发流程,将一个静态的使用模拟数据的应用,变成具有AngularJS特性的动态web应用.在6-8章,作者将展示如何创建一个更复杂,更真实的AngularJS应用. 1.准备项 ...

  6. Verilog语法基础讲解之参数化设计

    Verilog语法基础讲解之参数化设计   在Verilog语法中,可以实现参数化设计.所谓参数化设计,就是在一个功能模块中,对于一个常量,其值在不同的应用场合需要设置为不同的置,则将此值在设计时使用 ...

  7. drupal 自定义表单调用autocomplete主标签实现方法

    代码如下: <php function module_name_form() { $form = array(); $form['city'] = array( '#title' => t ...

  8. MySQL数据很大的时候

    众所周知,mysql在数据量很大的时候查询的效率是很低的,因为假如你需要 OFFSET 100000 LIMIT 5 这样的数据,数据库就需要跳过前100000条数据,才能返回给你你需要的5条数据.由 ...

  9. HDU 2846：Repository（Trie）

    http://acm.hdu.edu.cn/showproblem.php?pid=2846 题意:给出N个模式串,再给出M个文本串,问每一个文本串在多少个模式串中出现. 思路:平时都是找前缀的,这里 ...

  10. C#:实现托盘

    1.向窗体上添加如下控件:MenuStrip menuStrip1, NotifyIcon ni_frmMain,Timer timer1, ContentMenuStrip cms_notify.其 ...