公司做一个实时监控有一个地方需要把后台推送的数据动态的使用表格进行展示
我知道有一些插件可以做，但问题是我找的那个插件发现动态更新数据时IE内存一直累积，最后会造成崩溃现象
使用别人的插件说起来是效果好一些，功能多一些，但是需要的JS和复杂的逻辑，一旦出问题你很难去处理它
我也赶不上再去研究它，我直接手工写一个算了，虽然没有多好的效果，没有额外的功能，但是实现动态表格数据刷新，还是能充分满足要求的！
先把代码全部贴出来，只要把这个代码写到HTML中，就能看到效果：
.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; } 最后更新时间：
A B C D
效果：
数据会一次是个位数一次是十位数的变化。
下面来简单说一下实现：
数据来源可以是推送的，可以是Ajax请求的，数据源就是Json字符串
解析Json，循环获得对象数组，每循环一次增加一行，然后根据属性在行中增加单元格和增加单元格的内容。如果你想，也可以设置行和单元格的样式
当然每次增加前要先清除掉除标题以外的所有行，然后再增加
删除单元格的方法：
// 删除所有行，不删除标题行
function fnDeleteXLRow(){
var table = document.getElementById('proc');
var rowCount = table.rows.length; // 获得一共多少行，因为不删除标题，所以索引从 1 开始
for(var i=1;i
获得有多少行，从索引 1 开始循环一定的次数，每次删除的都是 索引 1 ，因为删除之后下面的会顶上来，这个看一下Excel就明白了
循环对象增加行和列的代码：
for(var i=0;i
你也可以这样：
var row1cell0=row1.insertCell(0);
// 指定列的样式
row1cell0.className="m_td1";
来指定行或列的样式，不过一般我们把表格设置一个样式引用，然后在该样式中处理就可以了
样式：
.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;
}
这个样式只针对该表格生效！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
JavaScript相关栏目本月热门文章
- 1【Linux驱动开发】设备树详解（二）设备树语法详解
- 2别跟客户扯细节
- 3Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区
- 4【Java】对象处理流（ObjectOutputStream和ObjectInputStream）
- 5【分页】常见两种SpringBoot项目中分页技巧
- 6一文带你搞懂OAuth2.0
- 7我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：虚拟机与Java虚拟机介绍
- 8【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成
- 9JavaSE - 封装、static成员和内部类
- 10树莓派mjpg-streamer实现监控及拍照功能调试
- 11用c++写一个蓝屏代码
- 12从JDK8源码中看ArrayList和LinkedList的区别
- 13idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目
- 14在openwrt使用C语言增加ubus接口（包含C uci操作）
- 15Spring 解决循环依赖
- 16SpringMVC——基于MVC架构的Spring框架
- 17Andy‘s First Dictionary C++ STL set应用
- 18动态内存管理
- 19我的创作纪念日
- 20Docker自定义镜像-Dockerfile
热门相关搜索
路由器设置
木托盘
宝塔面板
儿童python教程
心情低落
朋友圈
vim
双一流学科
专升本
我的学校
日记学校
西点培训学校
汽修学校
情书
化妆学校
塔沟武校
异形模板
西南大学排名
最精辟人生短句
6步教你追回被骗的钱
南昌大学排名
清朝十二帝
北京印刷学院排名
北方工业大学排名
北京航空航天大学排名
首都经济贸易大学排名
中国传媒大学排名
首都师范大学排名
中国地质大学(北京)排名
北京信息科技大学排名
中央民族大学排名
北京舞蹈学院排名
北京电影学院排名
中国戏曲学院排名
河北政法职业学院排名
河北经贸大学排名
天津中德应用技术大学排名
天津医学高等专科学校排名
天津美术学院排名
天津音乐学院排名
天津工业大学排名
北京工业大学耿丹学院排名
北京警察学院排名
天津科技大学排名
北京邮电大学(宏福校区)排名
北京网络职业学院排名
北京大学医学部排名
河北科技大学排名
河北地质大学排名
河北体育学院排名
名师互学网 版权所有 (c)2021-2022 ICP备案号：晋ICP备2021003244-6号
