zoukankan      html  css  js  c++  java
  • JQuery增删改查

    <!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{ 50px; height:40px; margin-left:2px; text-align:center;
                       list-style:none; line-height:40px;     background-color:Green; float:left;}
               #msg{ 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 = 0;var b = 0;var  cd = 0; //计数器
                for (var i = 0; i < s.length; i++) {
                    var c = s.charCodeAt(i);
                    if (c >= 65 && c <= 90) {
                        a=1;//字母
                    }
                    else if (c >= 48 && c <= 57)
                     {
                         b=1;//数字
                     }
                    else {
                         cd=1; //其它字符
                    }
                 }
                 var d = document.getElementById("msg");
                 if (a + b + cd == 3) {
                     d.innerHTML = "".fontcolor("red") ;
                 }
                 else if (a + b + cd == 2) {
                 d.innerHTML = "".fontcolor("yellow");
                 }
                 else {
                 d.innerHTML = "".fontcolor("red");
                 }
    
    
            }
        </script>
        <script type ="text/javascript">
            function overImg(v) {
                var i = 50;
                var si = setInterval(function () {
                    i += 2;
                    v.height = i;
                    if (i >= 200) {
                        clearInterval(si);
                    }
                }, 10);
            }
        </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[0].removeChild(tr);
                        alert("成功!!!");
                    }
                }; 
                editInput.type = "button";
                editInput.value = "编辑";
                editInput.onclick = function () {
                    $("name").value = tr.childNodes[0].innerHTML;
                    currentEditTr = tr;
                };
                td2.appendChild(delInput);
                td2.appendChild(editInput);
                td.innerHTML = n;
                tr.appendChild(td);
                tr.appendChild(td2);
                list.tBodies[0].appendChild(tr); 
            } 
            function updateData() {
                var n = $("name").value;
                if (currentEditTr != null) {
                    //有编辑的项
                    currentEditTr.childNodes[0].innerHTML = n;
    
                }
            }
        </script>
    </head>
    <body>
    <ul id="menu">
    <li>网页</li>
    <li>MP3</li>
    <li>视频</li>
    <li>图片</li>
    </ul>
    
    <table>
        <tr>
            <td width="100"   height="100" style=" text-align:center; vertical-align:bottom;">
                内容
            </td>
        </tr>
    </table>
    
     
    <input type="password" onkeyup="chekcPwd(this)"  /><div id="msg"></div>
        <img src="images/114.jpg" height="50" onmouseover="overImg(this)" />
        <table id="list" border="1"> 
        <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>
  • 相关阅读:
    Python 存储引擎 数据类型 主键
    Python 数据库
    Python 线程池进程池 异步回调 协程 IO模型
    Python GIL锁 死锁 递归锁 event事件 信号量
    Python 进程间通信 线程
    Python 计算机发展史 多道技术 进程 守护进程 孤儿和僵尸进程 互斥锁
    Python 异常及处理 文件上传事例 UDP socketserver模块
    Python socket 粘包问题 报头
    Django基础,Day7
    Django基础,Day6
  • 原文地址:https://www.cnblogs.com/xiaz/p/5242451.html
Copyright © 2011-2022 走看看