自定义JS实现动态表格数据展示，避开IE内存问题
174 浏览量
更新于2024-08-28
收藏 74KB PDF 举报
在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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
.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>
<script language="javascript" type="text/javascript">
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页未读，立即下载
2019-12-02 上传
2024-01-03 上传
2020-09-03 上传
2020-11-23 上传
2019-08-10 上传
2012-09-27 上传
2020-10-28 上传
2020-10-22 上传
点击了解资源详情
weixin_38645862
- 粉丝: 9
- 资源: 902
我的内容管理
展开
最新资源
- 火炬连体网络在MNIST的2D嵌入实现示例
- Angular插件增强Application Insights JavaScript SDK功能
- 实时三维重建：InfiniTAM的ros驱动应用
- Spring与Mybatis整合的配置与实践
- Vozy前端技术测试深入体验与模板参考
- React应用实现语音转文字功能介绍
- PHPMailer-6.6.4: PHP邮件收发类库的详细介绍
- Felineboard：为猫主人设计的交互式仪表板
- PGRFileManager：功能强大的开源Ajax文件管理器
- Pytest-Html定制测试报告与源代码封装教程
- Angular开发与部署指南：从创建到测试
- BASIC-BINARY-IPC系统：进程间通信的非阻塞接口
- LTK3D: Common Lisp中的基础3D图形实现
- Timer-Counter-Lister:官方源代码及更新发布
- Galaxia REST API：面向地球问题的解决方案
- Node.js模块：随机动物实例教程与源码解析
