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;
}