這篇文章主要介紹了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; }