AJAX实现添加删除

来源：互联网发布：java httpclient 抓包编辑：程序博客网时间：2024/05/17 06:38

<!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");

   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>

<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>