AJAX实现添加删除

rigger21

浏览: 131543 次
性别:
来自: 北京

最近访客更多访客>>

kidqhj

kalin001

wangdawei

zhutianfu

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (113)

社区版块

存档分类

Ajax F#JavaScript prototype 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.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>