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; }
相关推荐
87510793 2020-05-09
88274956 2020-11-03
runner 2020-09-01
梦的天空 2020-08-25
移动开发与培训 2020-08-16
ReunionIsland 2020-08-16
lyqdanang 2020-08-16
MyNameIsXiaoLai 2020-07-08
星辰的笔记 2020-07-04
csstpeixun 2020-06-28
letheashura 2020-06-26
liaoxuewu 2020-06-26
sunzhihaofuture 2020-06-21
FEvivi 2020-06-16
坚持着执着 2020-06-16
waterv 2020-06-14
xiaoge00 2020-06-14
firejq 2020-06-14
firstboy0 2020-06-14
e度空间 2020-06-12
zhongweinan 2020-06-10