js无刷新操作table的行和列


Posted in Javascript onMarch 27, 2014

代码仅供参考 如果强行复制请修改页面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; 
}
Javascript 相关文章推荐
jquery $(this).attr $(this).val方法使用介绍
Oct 08 Javascript
用javascript将数据导入Excel示例代码
Sep 10 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
同步文本框内容JS代码实现
Aug 04 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
小程序转发探索示例
Feb 19 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 Javascript
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 #Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 #Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 #Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 #Javascript
JS中判断null、undefined与NaN的方法
Mar 26 #Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 #Javascript
JS阻止用户多次提交示例代码
Mar 26 #Javascript
You might like
PHP文件上传实例详解!!!
2007/01/02 PHP
php实现监听事件
2013/11/06 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
js实现图片轮播效果学习笔记
2017/07/26 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
JS实现手风琴特效
2020/11/08 Javascript
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
Python如何调用JS文件中的函数
2019/08/16 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
C语言面试题
2015/10/30 面试题
单位人事专员介绍信
2014/01/11 职场文书
出国签证在职证明
2014/01/16 职场文书
装修五一活动策划案
2014/01/23 职场文书
优良学风班申请材料
2014/02/13 职场文书
个人欠款担保书
2014/05/20 职场文书
企业承诺书格式
2014/05/21 职场文书
工地标语大全
2014/06/18 职场文书
党支部先进事迹材料
2014/12/24 职场文书
运动会开幕词
2015/01/28 职场文书
小鞋子观后感
2015/06/05 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
Python中字符串对象语法分享
2022/02/24 Python