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使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
React组件对子组件children进行加强的方法
Jun 23 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批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
用Python编写简单的微博爬虫
2016/03/04 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
Python操作MySQL数据库的方法
2018/06/20 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
python函数定义和调用过程详解
2020/02/09 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
傲盾软件面试题
2015/08/17 面试题
房屋买卖委托书格式范本格式
2014/10/13 职场文书
2015年女职工工作总结
2015/05/15 职场文书
小学信息技术教学反思
2016/02/16 职场文书
python 命令行传参方法总结
2021/05/25 Python