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>
  • 相关阅读:
    编程自学网站
    SQL中Case语句用法
    SQL 综合应用(1.创建临时表,为后续查询所用) 实例_(学生,课程表,选修表)
    SQL 存储过程(学生,课程表,选修表)
    测试角度看公司流程规范对比后篇
    自动化测试技巧之图片验证
    QTP连载四:神一样的参数化方式?
    自动化测试之控件点击
    自动化测试技巧之结果验证
    自动化测试开展的条件
  • 原文地址:https://www.cnblogs.com/xiaz/p/5242451.html
Copyright © 2011-2022 走看看