js无刷新操作table的行和列

2014-03-27 53

代码仅供参考 如果强行复制请修改页面id

//查询数据库符合条件的数据 
function SelectAlterNativeVenues(field) 
{ 
var xmlhttp; 
var pid = document.getElementById("nameandaddress").value; 
var url = "${RetrieveURL}?accessorType=${AccessorType}"; 
url = url+"&method=RetrieveSelectResult&NameAndAddress="+escape(pid); 
if (window.XMLHttpRequest) 
{ 
xmlhttp = new XMLHttpRequest(); 
} 
else if (window.ActiveXObject) 
{ 
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE 
} 
if (xmlhttp != null) 
{ 
xmlhttp.open("GET", url, true); 
xmlhttp.setRequestHeader("If-Modified-Since", "0"); 
xmlhttp.send(null); 
xmlhttp.onreadystatechange = function processRefreshUsers() //注册方法 
{ 
if (xmlhttp.readyState == 4) 
{ 
if (xmlhttp.status == 200) 
{ 
//responseXML获取执行RetrieveCitiesByProvinceId方法的返回值 
var datas = xmlhttp.responseXML.documentElement.getElementsByTagName("AlterNativeVenues"); 
var nname = document.getElementById("table1"); 
var pchildren = nname.childNodes;//清空表中的行和列 
for(var a=0; a<pchildren.length; a++) 
{ 
nname.removeChild(pchildren[a]); 
} 
//添加查询行 
var aaRow=nname.insertRow(0); 
var aaCell=aaRow.insertCell(0); 
aaCell.innerHTML="<input type='text' name='nameandaddress' id='nameandaddress'/>"; 
aaRow.insertCell(1).innerHTML="<span style=\"cursor:pointer;border:1px\" name=\"submit\" onclick=\"SelectAlterNativeVenues('"+field+"');\" >查询</span>"; 
//添加标题行 
var aRow=nname.insertRow(1); 
aRow.insertCell(0).innerHTML=""; 
aRow.insertCell(1).innerHTML="名称"; 
aRow.insertCell(2).innerHTML="地址"; 
aRow.insertCell(3).innerHTML="电话"; 
//循环添加数据行 
for (i = 0; i < datas.length; i++) 
{ 
var Id = datas[i].getElementsByTagName("Id")[0].firstChild.nodeValue; 
var Name = datas[i].getElementsByTagName("Name")[0].firstChild.nodeValue; 
var Address=datas[i].getElementsByTagName("Address")[0].firstChild.nodeValue; 
var Phone=datas[i].getElementsByTagName("Phone")[0].firstChild.nodeValue; var aNewRow=nname.insertRow(i+2); 
aNewRow.insertCell(0).innerHTML="<input type=\"checkbox\" id=\"AlterNativeVenues_"+Id+"\" name=\"AlterNativeVenues_"+Id+"\" onclick=\"AddRowSelectAfter('AlterNativeVenues_"+Id+"','"+field+"')\" />"; 
aNewRow.insertCell(1).innerHTML=Name; 
aNewRow.insertCell(2).innerHTML=Address; 
aNewRow.insertCell(3).innerHTML=Phone; 
} 
} 
} 
} 
} 
} 

//添加已选中的数据 
function AddRowSelectAfter(id,field) 
{ 
//把隐藏域里面的所有id划分开 然后把对应的checked绑定 
var state=false; //判断下面列表是否存在 
var _hiddenId=document.getElementById(field).value.substr(0,document.getElementById(field).value.length-1).split(','); 
for(j=0;j<_hiddenId.length;j++) 
{ 
if(_hiddenId[j]==id.split('_')[1]) 
{ 
state=true; 
} 
} 
if(state==false) 
{ 
//只要点击checkbox就出发一次更改隐藏域的值 
//非选中状态需要把id从隐藏控件里面移除 
var arrs=document.getElementById(field).value.substr(0,document.getElementById(field).value.length-1).split(','); 
//定义一个字段重新获取id 
var newids=""; 
for(var arr=0;arr<arrs.length;arr++) 
{ 
if(arrs[arr]!=id.split('_')[1]) 
newids+=arrs[arr]+","; 
} 
//重新给隐藏控件赋值 
//最后一个字符可能是, 
var fh=newids.substr(newids.length-1,newids.length); 
if(fh==",") 
document.getElementById(field).value=newids.substr(0,newids.length-1); 
else 
document.getElementById(field).value=newids; 

if(document.getElementById(id).checked==false) 
{ 
//选中状态点击改为非点中状态 移除已选的场馆 
document.getElementById(id).checked=false; 
//给tr设置id用来删除tr 
document.getElementById("table2").deleteRow(document.getElementById("NewRow_"+id.split('_')[1]).rowIndex); 
} 
else 
{ 
document.getElementById(id).checked=true; 
var input =document.getElementById(field); 
var xmlhttp; 
var url = "${RetrieveURL}?accessorType=${AccessorType}"; 
url = url+"&method=SelectResult&id="+id; 
if (window.XMLHttpRequest) 
{ 
xmlhttp = new XMLHttpRequest(); 
} 
else if (window.ActiveXObject) 
{ 
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE 
} 
if (xmlhttp != null) 
{ 
xmlhttp.open("GET", url, true); 
xmlhttp.setRequestHeader("If-Modified-Since", "0"); 
xmlhttp.send(null); 
xmlhttp.onreadystatechange = function processRefreshUsers() //注册方法 
{ 
if (xmlhttp.readyState == 4) 
{ 
if (xmlhttp.status == 200) 
{ 
//responseXML获取执行RetrieveCitiesByProvinceId方法的返回值 
var datas = xmlhttp.responseXML.documentElement.getElementsByTagName("AlterNativeVenues"); 
var nname = document.getElementById("table2"); 
nname.style.width="560px"; 
if(nname.rows.length==0&&datas.length>0) 
{ 
//第一行 
var firstRow=nname.insertRow(0); 
firstRow.id="NewRow_0"; 
firstRow.insertCell(0).innerHTML="名称"; 
firstRow.insertCell(1).innerHTML="地址"; 
firstRow.insertCell(2).innerHTML="电话"; 
firstRow.insertCell(3).innerHTML="操作"; 
} 
for (i = 0; i < datas.length; i++) 
{ 
var Id = datas[i].getElementsByTagName("Id")[0].firstChild.nodeValue; 
var Name = datas[i].getElementsByTagName("Name")[0].firstChild.nodeValue; 
var Address=datas[i].getElementsByTagName("Address")[0].firstChild.nodeValue; 
var Phone=datas[i].getElementsByTagName("Phone")[0].firstChild.nodeValue; 
var aNewRow=nname.insertRow(nname.rows.length); 
aNewRow.id="NewRow_"+Id; 
var oneCell=aNewRow.insertCell(0); 
oneCell.innerHTML=Name; 
oneCell.width=140; 
var twoCell=aNewRow.insertCell(1); 
twoCell.innerHTML=Address; 
twoCell.width=280; 
var threeCell=aNewRow.insertCell(2); 
threeCell.innerHTML=Phone; 
threeCell.width=100; 
var fourCell=aNewRow.insertCell(3); 
fourCell.innerHTML="<span id=\"span_"+Id+"\" onclick=\"DeleteRow('"+Id+"',this,'"+field+"')\">删除</span>"; 
fourCell.width=40; 
if(input.value!="") 
input.value+=","; 
input.value+=Id; 
} 
} 
} 
} 
} 
} 
} 
} 
function DeleteRow(id,obj,field) 
{ 
obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode) 
var nname = document.getElementById("table2"); 
if(nname.rows.length==1) 
{ 
nname.deleteRow(0); 
} 
//已经存储到数据库的 查询之后上面列表没有的情况 
if(document.getElementById("AlterNativeVenues_"+id)!=null||document.getElementById("AlterNativeVenues_"+id)!=undefined) 
{ 
if(document.getElementById("AlterNativeVenues_"+id).checked==true) 
{ 
document.getElementById("AlterNativeVenues_"+id).checked=false; 
} 
} 
//非选中状态需要把id从隐藏控件里面移除 
var arrs=document.getElementById(field).value.substr(0,document.getElementById(field).value.length-1).split(','); 
//定义一个字段重新获取id 
var newids=""; 
for(var arr=0;arr<arrs.length;arr++) 
{ 
if(arrs[arr]!=id) 
newids+=arrs[arr]+","; 
} 
//重新给隐藏控件赋值 
//重新给隐藏控件赋值 
//最后一个字符可能是, 
var fh=newids.substr(newids.length-1,newids.length); 
if(fh==",") 
{ 
document.getElementById(field).value=newids.substr(0,newids.length-1); 
} 
else 
document.getElementById(field).value=newids; 
}
展开阅读全文

更多Javascript文章

国外Lightbox v2.03.3 最新版 下载
Oct 17 50
Jquery如何实现点击时高亮显示代码
Jan 22 39
js实现具有高亮显示效果的多级菜单代码
Sep 01 42
jquery购物车结算功能实现方法
Oct 29 36
node 使用 async 控制并发的方法
May 07 45
详解使用React制作一个模态框
Mar 14 36
Vue 权限控制的两种方法(路由验证)
Aug 16 48
手机访问当前页面