自定义JS实现动态表格数据展示，避开IE内存问题

28 浏览量更新于2024-08-28 收藏 74KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

在JavaScript中操作DOM以动态展示数据，尤其是在表格中，对于实时监控应用来说非常重要。当公司需要将后台不断推送的数据实时反映在表格中，传统的插件虽然可能提供丰富的功能和良好的视觉效果，但可能存在性能问题，例如在IE浏览器中，某些插件可能导致内存泄漏，最终导致浏览器崩溃。考虑到维护和性能的挑战，选择自己编写代码来实现动态表格刷新可能是更合适的选择。在手动实现过程中，开发者可以选择使用原生的DOM API，如`document.createElement()`、`appendChild()`、`removeChild()`等方法来动态创建和管理表格元素。以下是一个简单的HTML和CSS示例，展示了如何创建一个具有样式的基本表格，并结合JavaScript来动态填充数据： ```html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>动态表格数据展示</title> <style> .table0 { font-family: "宋体"; font-size: 14px; width: 400px; border: 1px solid #c4cdd4; border-collapse: collapse; } .table0 tr { height: 25px; padding-left: 5px; text-align: left; } .table0 th { color: #4c7c9b; font-weight: normal; background-color: #f2f5fa; } .table0 td { padding: 5px; } </style> </head> <body> <div id="dataContainer"> <table class="table0" id="dynamicTable"> <thead> <tr>  <th>列1</th> <th>列2</th>  </tr> </thead> <tbody id="tableBody"></tbody> </table> </div> <script> // 假设有个数据源arrayData，包含后台推送的数据 const arrayData = [ { column1: '数据1', column2: '数据2' }, { column1: '数据3', column2: '数据4' }, // 更多数据... ]; function renderData() { const tableBody = document.getElementById('tableBody'); tableBody.innerHTML = ''; arrayData.forEach((row) => { const newRow = document.createElement('tr'); Object.keys(row).forEach(key => { const cell = document.createElement('td'); cell.textContent = row[key]; newRow.appendChild(cell); }); tableBody.appendChild(newRow); }); } // 初始化表格并定时刷新数据 renderData(); setInterval(renderData, 5000); // 每隔5秒更新一次数据 // 注意：这里仅作为基础示例，实际应用可能需要处理更多细节，如错误处理、数据异步获取等 </script> </body> </html> ``` 这个示例展示了如何创建一个固定的表格结构，然后通过JavaScript函数`renderData`来动态填充数据。数据源`arrayData`会定期更新（这里使用`setInterval`模拟后台推送），表格内容随之改变。这种方法虽然不包含复杂的插件功能，但能满足基本的动态数据展示需求，并且易于理解和维护，避免了内存泄漏的问题。当然，对于更复杂的场景，可能需要结合现代前端框架（如React或Vue）或者使用专门的库（如jQuery DataTables）来提升用户体验和性能。

资源详情

资源推荐

JS如何操作如何操作DOM基于表格动态展示数据基于表格动态展示数据

公司做一个实时监控有一个地方需要把后台推送的数据动态的使用表格进行展示

我知道有一些插件可以做，但问题是我找的那个插件发现动态更新数据时IE内存一直累积，最后会造成崩溃现象

使用别人的插件说起来是效果好一些，功能多一些，但是需要的JS和复杂的逻辑，一旦出问题你很难去处理它

我也赶不上再去研究它，我直接手工写一个算了，虽然没有多好的效果，没有额外的功能，但是实现动态表格数据刷新，还是

能充分满足要求的！

先把代码全部贴出来，只要把这个代码写到HTML中，就能看到效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

.table0 {

font-family: "宋体";

font-size: 14px;

width: 400px;

border-top-width: 1px;

border-top-style: solid;

border-top-color: #c4cdd4;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #c4cdd4;

border-right-width: 1px;

border-right-style: solid;

border-right-color: #c4cdd4;

border-left-width: 1px;

border-left-style: solid;

border-left-color: #c4cdd4;

}

.table0 tr {

height : 25px;

padding-left:5px;

text-align: left;

}

.table0 th {

color: #4c7c9b;

font-weight: normal;

background-color: #f1f1f1;

height: 25px;

border-right-width: 1px;

border-right-style: solid;

border-right-color: #c4cdd4;

}

.table0 td {

border-right-width: 1px;

border-right-style: solid;

border-right-color: #c4cdd4;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #c4cdd4;

}

</style>

var istt = false;

var values = "";

function callback(){

if(istt){

values = "[{'a':1,'b':'1','c':'1','d':'1'},{'a':2,'b':'2','c':'2','d':'2'},{'a':3,'b':'3','c':'3','d':'3'},{'a':4,'b':'4','c':'4','d':'4'}]";

istt=false;

}else{

values = "[{'a':10,'b':'10','c':'10','d':'10'},{'a':20,'b':'20','c':'20','d':'20'},{'a':30,'b':'30','c':'30','d':'30'},{'a':40,'b':'40','c':'40','d':'40'}]";

istt=true;

}

if(null!=values&&''!=values){

fnDeleteXLRow(); // 清除除标题外所有行

var objs=eval(values); // 解析JSON

for(var i=0;i<objs.length;i++){ // 循环对象

var u = objs[i];

var tab=document.getElementById("proc"); // 获得表格

var rows=tab.rows; // 表格ROW对象

var row1=tab.insertRow(rows.length); // 插入一行rows是一个数组，代表没一行，索引从0开始

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38645862

粉丝: 9
资源: 902

自定义JS实现动态表格数据展示，避开IE内存问题

js表格操作，DOM实现数据动态增删查改

基于JavaScript和DOM的动态表单设计及数据提交.pdf

Dom生成表格和实现分页源码

LAYUI数据表格 查询

layui将动态数据渲染到模板配置

element-ui中关于table表格的那些骚操作(小结

vben 大数据量可编辑表格 卡

datatables.treegrid.js

layui ajax获取后端数据在前端展示

element-plus虚拟化表格

使用js写一个表格，加边框

poitl循环表格循环行

vxe-table 表格控制显示隐藏

蓝凌js明细表隐藏列

vxe-table动态合并单元格

el-table 刷新界面闪烁

excel表格在线系统源码

vue3 vueTable

vue spreadsheet

html css js elementui做仓储出入库页面

最新资源

LAYUI数据表格查询

vben 大数据量可编辑表格卡