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{ 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增删改查

相关文章
