<!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.o
<!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 = 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>
