js无刷新操作table的行和列_javascript技巧

代码仅供参考 如果强行复制请修改页面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;
}

时间： 2024-11-25 12:49:08

js无刷新操作table的行和列_javascript技巧的相关文章

js无刷新操作table的行和列

 这篇文章主要介绍了js操作table的行和列,无刷新实现,需要的朋友可以参考下 代码仅供参考 如果强行复制请修改页面id   代码如下: //查询数据库符合条件的数据  function SelectAlterNativeVenues(field)  {  var xmlhttp;  var pid = document.getElementById("nameandaddress").value;  var url = "${RetrieveURL}?accessorTy

谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法_javascript技巧

发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明:      html如下所示,请求的路径action为"upload",其它的不做任何处理: <form method="POST" action="upload" enctype="multipart/form-data"> 名字 <input type="t

js操作table示例(个人心得)_javascript技巧

记得以前面试的时候遇到过这样一个问题:有一个表格,然后有4个输入框,一个合并按钮,输入框是这样的,从第几行到第几行,从第几列到第几列,然后点击按钮,合并 .当时我从学校出来,js知识只是知道一些,根本做不到!现在想想,其实这个问题也还是考基础功夫是否扎实!大家有兴趣可以自己做做看,测下自己是不是能够做出来.题目的截图:  现在做这个问题,看起来简单,但我还是花了很长时间,可能是我的思路不对吧?主要就是用js来操作html,我现在实现了添加行,删除行,添加列,删除列 ,但合并单元格却不能完整的实现

一组JS创建和操作表格的函数集合_javascript技巧

stone.js //**************************************神吹表格操作函数******************************************************* //隐藏列 function setHiddenRow(tb,iCol){ for (i=0;i<oTable.rows.length;i++){ tb.rows[i].cells[iCol].style.display = oTable.rows[i].cells[iCo

JS本地刷新返回上一页代码_javascript技巧

长话短说,今天介绍实现此功能的一个方法,需要了解的朋友可以参考下: 一.JS 重载页面,本地刷新,返回上一页 代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a href="javascript:location.reload()">重载页面,本地刷新</a> <a href="javascript:history.go(-1);location

javascript+iframe 实现无刷新载入整页的代码_javascript技巧

jquery有一个load()方法,使用方法如:$("#div").load("/index.html");这样就可以将index.html加载到ID为div的容器中, 用iframe也可以实现,但没有上述做法完美,参见discuz那些网站,如登陆弹出一个层,也是载入的一个页面,但我发现状态栏左边出现的是 正在打开about:blank,不知道是不是将iframe的src设为about:blank,然后在编辑iframe呢?但注意了,查看源代码的时候却看不到载入页面

JS运行耗时操作的延时显示方法_javascript技巧

代码如下: 复制代码 代码如下: document.getElementById("btnConnect").value = "连接中"; Connect(); // 很耗时的操作 document.getElementById("btnConnect").value = "已连接"; 执行的时候发现,按钮并没有改为"连接中"的状态,而是等Connect();执行完以后才快速改为"连接中"

js 无提示关闭浏览器页面的代码_javascript技巧

方法一: 复制代码 代码如下: top.window.opener=null; top.window.open("","_self"); top.window.close(); 方法二: 复制代码 代码如下: top.window.opener = top; top.window.open('','_self',''); top.window.close(); _blank,在新窗口显示目标网页 _self,在当前窗口显示目标网页 _parent,框架网页中当前整个

js 连接数据库如何操作数据库中的数据_javascript技巧

//连接SQL 复制代码 代码如下: <script language="javascript"> var conn = new ActiveXObject("ADODB.Connection"); conn.Open("Provider=SQLOLEDB.1; Data Source=tgf; User ID=sa; " +"Password=sasa; Initial Catalog=MyBulletin");