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;

}