热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

js无刷新操作table的行和列

这篇文章主要介绍了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{
nname.removeChild(pchildren[a]);
}
//添加查询行
var aaRow=nname.insertRow(0);
var aaCell=aaRow.insertCell(0);
aaCell.innerHTML="";
aaRow.insertCell(1).innerHTML="查询";
//添加标题行
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 {
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="";
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{
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.;
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 {
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.删除";
fourCell.")
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{
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;
}

推荐阅读
  • 本文将详细介绍如何安装和使用 CactiEZ 的中文版本,帮助那些对英文界面不太熟悉的用户轻松掌握这一强大的网络监控工具。 ... [详细]
  • 本文详细介绍了JSP(Java Server Pages)的九大内置对象及其功能,探讨了JSP与Servlet之间的关系及差异,并提供了实际编码示例。此外,还讨论了网页开发中常见的编码转换问题以及JSP的两种页面跳转方式。 ... [详细]
  • 本文探讨了Web开发与游戏开发之间的主要区别,旨在帮助开发者更好地理解两种开发领域的特性和需求。文章基于作者的实际经验和网络资料整理而成。 ... [详细]
  • 在Linux系统上构建Web服务器的详细步骤
    本文详细介绍了如何在Linux系统上搭建Web服务器的过程,包括安装Apache、PHP和MySQL等关键组件,以及遇到的一些常见问题及其解决方案。 ... [详细]
  • 本文探讨了如何通过WebBrowser控件在用户点击输入框时自动显示图片验证码。该过程可能涉及JavaScript事件的触发与响应。 ... [详细]
  • 本文详细介绍了如何在Android应用中使用GridView组件以网格形式展示数据(如文本和图像)。通过行列布局,实现类似矩阵的数据展示效果。 ... [详细]
  • 本文探讨了浏览器的同源策略限制及其对 AJAX 请求的影响,并详细介绍了如何在 Spring Boot 应用中优雅地处理跨域请求,特别是当请求包含自定义 Headers 时的解决方案。 ... [详细]
  • PHP 中 preg_match 函数的 isU 修饰符详解
    本文详细解析 PHP 中 preg_match 函数中 isU 修饰符的具体含义及其应用场景,帮助开发者更好地理解和使用正则表达式。 ... [详细]
  • 在使用Maven进行项目构建时,由于依赖库的下载速度慢常常让人感到沮丧,这直接影响了开发效率和学习热情。幸运的是,阿里云提供了一个快速的国内镜像服务,能够显著提升Maven项目的构建速度。 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 本文详细探讨了在微服务架构中,使用Feign进行远程调用时出现的请求头丢失问题,并提供了具体的解决方案。重点讨论了单线程和异步调用两种场景下的处理方法。 ... [详细]
  • 在本问题中,游戏的每一步状态均可以视为原始序列的一个子序列。通过定义一个动态规划函数 d(i, j),表示在最优策略下,先手玩家从原序列的第 i 个元素到第 j 个元素之间所能获得的最大分数。 ... [详细]
  • 探讨如何利用Electron框架,通过拖动HTML元素(如音乐列表项)到桌面来实现本地文件的复制。 ... [详细]
  • ML学习笔记20210824分类算法模型选择与调优
    3.模型选择和调优3.1交叉验证定义目的为了让模型得精度更加可信3.2超参数搜索GridSearch对K值进行选择。k[1,2,3,4,5,6]循环遍历搜索。API参数1& ... [详细]
  • 深入理解动态链接库及其应用
    本文将探讨动态链接库的基本概念,包括Windows下的动态链接库(DLL)和Linux下的共享库(Shared Library),并详细介绍如何在Linux环境中创建和使用这些库。 ... [详细]
author-avatar
mobiledu2502898473
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有