当前位置：首页 > 全部内容 > 正文

JavaScript无刷新动态操作Table行与列实现

作者：流萤

时间：2026-10-29

浏览：199

本文提供了一段基于原生JavaScript的完整代码，演示如何利用XMLHttpRequest对象实现网页无刷新查询并动态更新HTML表格。代码涵盖了从发起异步请求、解析XML响应、清空并重建表头与数据行，到处理复选框选中状态及删除行的完整逻辑，适用于需要实时交互的Web开发场景。

文章目录

JavaScript无刷新操作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方法返回的XML数据
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，并将对应的复选框状态绑定
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以便后续删除该行
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方法返回的XML数据
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;
}

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

怎么在 Vue 或 React 项目中正确集成 animate.js

JS注册事件：addEventListener基础语法与参数详解

JSP和JS的区别：运行环境与服务端/客户端职责解析

pdf.js 官方下载地址：GitHub Release 获取预编译包

前端学习路径：为什么建议先掌握HTML再学习JavaScript？

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JavaScript实现按钮点击冷却时间的完整代码示例