js无刷新操作table的行和列

 更新时间:2014年03月27日 11:14:52   作者:   我要评论
这篇文章主要介绍了js操作table的行和列,无刷新实现,需要的朋友可以参考下
代码仅供参考 如果强行复制请修改页面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;
}

相关文章

  • js删除局部变量的实现方法

    js删除局部变量的实现方法

    下面小编就为大家带来一篇js删除局部变量的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • javascript数据类型中的一些小知识点(推荐)

    javascript数据类型中的一些小知识点(推荐)

    这篇文章主要介绍了javascript数据类型中的一些小知识点,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • JavaScript实现页面5秒后自动跳转的方法

    JavaScript实现页面5秒后自动跳转的方法

    这篇文章主要介绍了JavaScript实现页面5秒后自动跳转的方法,涉及javascript递归调用与计时函数setTimeout的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • JavaScript中 this 指向问题深度解析

    JavaScript中 this 指向问题深度解析

    这篇文章主要介绍了JavaScript中 this 指向问题深度解析,JavaScript 中的 this 指向问题有很多文章在解释,仍然有很多人问,本文给大家深度解析,需要的朋友可以参考下
    2017-02-02
  • js实现新年倒计时效果

    js实现新年倒计时效果

    这篇文章主要介绍了js实现2015年新年倒计时效果,很快就要迎接新的一年,想知道距离2016还有多少天吗?大家可以参考一下这篇文章
    2015-12-12
  • JS实现关键词高亮显示正则匹配

    JS实现关键词高亮显示正则匹配

    这篇文章主要介绍了JS实现关键词高亮显示正则匹配功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • javascript中indexOf技术详解

    javascript中indexOf技术详解

    indexOf()函数用于查找子字符串在当前字符串中第一次出现的位置。该函数属于String对象,所有主流浏览器均支持该函数。下面我们就来详细探讨下javascript的index0f()函数
    2015-05-05
  • Ajax与服务器(JSON)通信实例代码

    Ajax与服务器(JSON)通信实例代码

    这篇文章主要介绍了Ajax与服务器(JSON)通信实例代码的相关资料,并附实例代码,帮助大家学习理解此部分知识,需要的朋友可以参考下
    2016-11-11
  • 关于JavaScript 数组你应该知道的事情(推荐)

    关于JavaScript 数组你应该知道的事情(推荐)

    这篇文章主要介绍了JavaScript 数组,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • JavaScript定时器详解及实例

    JavaScript定时器详解及实例

    这篇文章详细介绍了JavaScript定时器及实例,有需要要的朋友可以参考一下
    2013-08-08

最新评论