<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">
function $() {
??? var elements = new Array();
??? for (var i = 0; i < arguments.length; i++) {
????? var element = arguments[i];
????? if (typeof element == 'string')
??????? element = document.getElementById(element);
????? if (arguments.length == 1)
??????? return element;
????? elements.push(element);
??? }
??? return elements;
}
//cody by jarry;
String.prototype.trim = function()
{ return this.replace(/(^\s*)|(\s*$)/g, "");}
function isExist(child,obj){
//obj has element the child;
???? for(var i=0;i<obj.elements.length;i++){
????? if(obj.elements[i].tagName.toLowerCase()=="input" && obj.elements[i].type=="checkbox"){
???????? if(obj.elements[i].value==child)return true;
????? }
???? }
???? return false;
}
function validateURL(url){
//validateURL
if(url.search(/^[A-Za-z0-9 -]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/)!=0){
return false;
//}else if(url.substring(0,4)=="www."){
//網址不要前面的www.，如果沒用的話可以注釋掉;
//return false;
}else{
return true;
}
}
var strAll=unescape("%u5168%u9009");
var canAll=unescape("%u53D6%u6D88");
function clickchk(obj){
var allcheck=true;
???? for(var i=0;i<obj.elements.length;i++){
????? if(obj.elements[i].tagName.toLowerCase()=="input" && obj.elements[i].type=="checkbox"){
??????? if(obj.elements[i].checked==false){allcheck=false;}
?????? }
??? }
??? obj.elements["check"].value=allcheck?canAll:strAll;??
}
function addSite(obj){
??? var url=obj.url.value.trim();
??? if(url.match(/^\s*$/g) || !validateURL(url)){alert("請輸入正確網址：如mysite.com");obj.url.focus();return;}
??? if(isExist(url,obj)){alert("你添加的網址已經存在列表中");return;}
??? var list=document.getElementById("list");
??? var chkbox=document.createElement("input");
??? chkbox.type="checkbox";
??? chkbox.onclick=function(){clickchk(obj);}//全部選擇后check按鈕顯示取消;
??? chkbox.value=url;
??? chkbox.name="url_chkbox";
??? var hr=document.createElement("hr");
??? hr.size="0";hr.style.borderTop="1px solid gray";
??? var txt=document.createTextNode(url);??
??? var div=document.createElement("div");
??? div.appendChild(chkbox);
??? div.appendChild(txt);
??? div.appendChild(hr);
??? div.style.backgroundColor = "olive";
??? div.onmouseover=function(){
???? showDelete(this);
??? }
??
//start add element;
??? list.appendChild(div);
//end add;
//如果已經添加了多選框則去掉禁用;
??? if(obj.check.disabled==true){
????? obj.check.disabled=false;
????? obj.recheck.disabled = false;
????? obj.remove.disabled=false;
????? }
return false;
}
function checkall(obj){//全選or取消全選;
var chk=obj.elements["check"];
???? for(var i=0;i<obj.elements.length;i++){
????? if(obj.elements[i].tagName.toLowerCase()=="input" && obj.elements[i].type=="checkbox"){
??????? if(chk.value==strAll){//check all checkbox input;
??????? obj.elements[i].checked=true;
??????? }else{
???????? obj.elements[i].checked=false;
??????? }
?????????
????? }
??? }
??? if($('list').childNodes.length<=1)return;
??? chk.value=chk.value==canAll?strAll:canAll;
??? //更改全選/取消的顯示;
}
function reverseCheck(obj){
???? var chk=obj.elements["check"];
???? for(var i=0;i<obj.elements.length;i++){
????? if(obj.elements[i].tagName.toLowerCase()=="input" && obj.elements[i].type=="checkbox"){
??????? obj.elements[i].checked = obj.elements[i].checked ? false : true;
????? }
????? clickchk(obj);
??? }
}
function del(list,obj){
??? var candel=false;
??? var i=list.childNodes.length;
??? var end = -1;
//alert(list.childNodes.length+"\n"+list.innerHTML);
???? while(??? i > end ){??
?????? /* if(typeof(list.childNodes[i]) != "undefined")
??????? {//delete all elements;
??????? list.removeChild(list.childNodes[i]);????
??????? }*/
?????? var??? s=list.childNodes[i];
/*
//alert( s + typeof(list.childNodes[i]) );
??? if(typeof(s)!="undefined"??? && s.tagName){??
??????? var tgname = s.tagName.toUpperCase();
???? //alert(tgname);
????????? if(??? tgname == "DIV" ){
??? // alert(list.childNodes.length+":"+typeof(s) + s + s.tagName.toUpperCase() + s.childNodes.length + s.childNodes[0].type)
??????? }
if(tgname == "DIV" && s.childNodes.length > 0 && s.childNodes[0].type.toLowerCase() =="checkbox" && s.childNodes[0].checked==true){
?????? //alert(s.childNodes[0].checked);
???? }
}*/
??? if(typeof(s)!="undefined"??? && s.tagName){
?????????? try{
??????????? var tgname = s.tagName.toUpperCase();
????? if(tgname != "DIV" || s.childNodes.length <=0 )return;
????????????????? var s1 = s.childNodes[0];
????? if( s1.type.toLowerCase() =="checkbox" && s1.checked==true ){
?????? candel = true;??
?????? list.removeChild(s);
???????????? //list.removeChild(s.nextSibling.nextSibling);
??????????? // list.removeChild(s.nextSibling);??????
???????????? //list.removeChild(s);???
???????????? //list.removeChild(s.previousSibling);
??????? }???
??????????? }catch(ex){
???????????? //alert(ex.toString());?????????
?????????? }
???????? }
????????
??????? i--;
???? }
???? if(candel==false){alert("請選擇你要刪除的選項")}
??? obj.check.disabled=list.childNodes.length>1?false:true;
??? obj.recheck.disabled=list.childNodes.length>1?false:true;
??? obj.check.value=strAll;
??? obj.remove.disabled=list.childNodes.length>1?false:true;
?????
}
function showDelete(self){
self.style.backgroundColor = "red";
}
</script>
</HEAD>
<BODY>
<form name="sitelist" onsubmit="return addSite(this);">
http:// <INPUT TYPE="text" size="30" NAME="url"> <INPUT TYPE="button" NAME="add" value="添加網址至列表" onclick="addSite(this.form)">
<div style="border:1px groove blue;width:400px;height:200px;padding:5px;overflow:auto" id="list">
<div onmouseover="showDelete(this);" style="background:gray"><input type=checkbox value="example.com" name="url_chkbox" onclick="clickchk(this.form)">example.com <hr style="1px solid gray" size="0"></div>
<div onmouseover="showDelete(this);" style="background:gray"><input type=checkbox value="example.com" name="url_chkbox" onclick="clickchk(this.form)">example.com <hr style="1px solid gray" size="0"></div>
</div>
<INPUT TYPE="button" NAME="check" value="全選" disabled onclick="checkall(this.form)"> <input type="button" value="反選" name="recheck" disabled??? onclick="reverseCheck(this.form)"> <INPUT TYPE="button" NAME="remove" disabled value="刪除" onclick="del($('list'),this.form)">
</form>
<script>
//頁面加載時初始化
function init(l,f){
??? var list=l;
??? f.check.disabled=list.childNodes.length>1?false:true;
??? f.recheck.disabled=list.childNodes.length>1?false:true;
??? f.check.value=strAll;
??? f.remove.disabled=list.childNodes.length>1?false:true;
}
window.onload=function(){
init($("list"),document.sitelist);
}
</script>
</BODY>
</HTML>
posted on 2007-05-27 11:42
jadmin 閱讀(67)
評論(0) 編輯 收藏