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建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
js中split函数的使用方法说明
Dec 26 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 Javascript
js实现飞机大战游戏
Aug 26 Javascript
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实现mysql数据库备份类
2008/03/20 PHP
在服务端进行目录建立、删除,文件上传、删除的过程的php代码
2008/09/10 PHP
php实现水仙花数示例分享
2014/04/03 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
JS重要知识点小结
2011/11/06 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
优秀护士演讲稿
2014/04/30 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书