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>
  • 相关阅读:
    【第40套模拟题】【noip2011_mayan】解题报告【map】【数论】【dfs】
    【模拟题(63550802...)】解题报告【贪心】【拓扑排序】【找规律】【树相关】
    【模拟题(电子科大MaxKU)】解题报告【树形问题】【矩阵乘法】【快速幂】【数论】
    IMemoryBufferReference and IMemoryBufferByteAccess
    SoftwareBitmap and BitmapEncoder in Windows.Graphics.Imaging Namespace
    Windows UPnP APIs
    编译Android技术总结
    Windows函数转发器
    Two Ways in Delphi to Get IP Address on Android
    Delphi Call getifaddrs and freeifaddrs on Android
  • 原文地址:https://www.cnblogs.com/xiaz/p/5242451.html
Copyright © 2011-2022 走看看