js无刷新操作table的行和列

代码仅供参考 如果强行复制请修改页面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;

}