这篇文章主要介绍了 js 操作 table 的行和列,无刷新实现, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
代码仅供参考 如果强行复制请修改页面 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;
- }
来源: