js無刷新操作table的行和列

 這篇文章主要介紹了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_&qu