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 相关文章推荐
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 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
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
PHP操作XML作为数据库的类
2010/12/19 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
PHP获取ttf格式文件字体名的方法示例
2019/03/06 PHP
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
jQuery.each使用详解
2015/07/07 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
js中作用域的实例解析
2017/03/16 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
解决python3 安装不了PIL的问题
2019/08/16 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
Python调用.NET库的方法步骤
2019/12/27 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
南京某软件公司的.net面试题
2015/11/30 面试题
计算机专业毕业生的自我评价
2013/11/18 职场文书
大学生作弊检讨书
2014/02/19 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
人事文员岗位职责
2015/02/04 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
初三毕业感言
2015/07/31 职场文书
污染环境建议书
2015/09/14 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
python中 .npy文件的读写操作实例
2022/04/14 Python
微信小程序实现轮播图指示器
2022/06/25 Javascript