AJAX实现添加删除

最新推荐文章于 2021-08-06 16:11:42 发布

weixin_30917213

最新推荐文章于 2021-08-06 16:11:42 发布

阅读量125

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jadmin/archive/2007/05/27/2206409.html

版权

<!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.οnclick=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.οnmοuseοver=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 οnmοuseοver="showDelete(this);" style="background:gray"><input type=checkbox value="example.com" name="url_chkbox" οnclick="clickchk(this.form)">example.com <hr style="1px solid gray" size="0"></div>

</div>
<INPUT TYPE="button" NAME="check" value="全选" disabled οnclick="checkall(this.form)">  <input type="button" value="反选" name="recheck" disabled    οnclick="reverseCheck(this.form)">  <INPUT TYPE="button" NAME="remove" disabled value="删除" οnclick="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.οnlοad=function(){
init($("list"),document.sitelist);
}
</script>
</BODY>
</HTML>

转载于:https://www.cnblogs.com/jadmin/archive/2007/05/27/2206409.html

weixin_30917213

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX实现添加删除

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME=...
复制链接

扫一扫