`
wang4674890
  • 浏览: 89014 次
  • 性别: Icon_minigender_2
  • 来自: 厦门
社区版块
存档分类
最新评论

JS操作DOM 使用表格动态展示数据

    博客分类：
  • java
htmljavascript 
阅读更多
公司做一个实时监控有一个地方需要把后台推送的数据动态的使用表格进行展示

我知道有一些插件可以做，但问题是我找的那个插件发现动态更新数据时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开始
				row1.insertCell(0).innerHTML="&nbsp;"+u.a; // insertCell插入列，从0开始
				row1.insertCell(1).innerHTML="&nbsp;"+u.b;
				row1.insertCell(2).innerHTML="&nbsp;"+u.c;
				row1.insertCell(3).innerHTML="&nbsp;"+u.d;
			}
		}
		// 更新时间的改变
		document.getElementById("endTime").value=curDateTime();
		// 垃圾回收
		CollectGarbage();
		// 产生回调
		setTimeout(callback, 1000);	
    }
	// 删除所有行，不删除标题行
    function fnDeleteXLRow(){
		var table = document.getElementById('proc');
		var rowCount = table.rows.length; // 获得一共多少行，因为不删除标题，所以索引从 1 开始
		for(var i=1;i<rowCount;i++){
			table.deleteRow(1); // 因为删除一行以后下面的行会顶上来，所以一直删除第一行即可
		}
	}
	// 获得当前时间
	function curDateTime(){
		var d = new Date(); 
		var year = d.getYear(); 
		var month = d.getMonth()+1; 
		var date = d.getDate(); 
		var day = d.getDay(); 
		var hours = d.getHours(); 
		var minutes = d.getMinutes(); 
		var seconds = d.getSeconds(); 
		var ms = d.getMilliseconds();   
		var curDateTime= year;
		if(month>9)
		 curDateTime = curDateTime +"-"+month;
		else
		 curDateTime = curDateTime +"-0"+month;
		if(date>9)
		 curDateTime = curDateTime +"-"+date;
		else
		 curDateTime = curDateTime +"-0"+date;
		if(hours>9)
		 curDateTime = curDateTime +" "+hours;
		else
		 curDateTime = curDateTime +" 0"+hours;
		if(minutes>9)
		 curDateTime = curDateTime +":"+minutes;
		else
		 curDateTime = curDateTime +":0"+minutes;
		if(seconds>9)
		 curDateTime = curDateTime +":"+seconds;
		else
		 curDateTime = curDateTime +":0"+seconds;
		return curDateTime; 
	}
	setTimeout(callback, 1000);	
</script>
</head>
<body>
<div id="table_div" align="left">
<font size="2px"><b>最后更新时间：</b></font><input type="text" id="endTime" value="00-00-00 00:00:00" readonly="readonly">
<br>
<table id="proc" width="98%" border="0" cellspacing="0" cellpadding="0"  class="table0">
	<tr>
		<th>&nbsp;<b>A</b></th>
		<th>&nbsp;<b>B</b></th>
		<th>&nbsp;<b>C</b></th>
		<th>&nbsp;<b>D</b></th>
	</tr>
</table>
</div>
</body>
</html>

效果：


数据会一次是个位数一次是十位数的变化。



下面来简单说一下实现：

数据来源可以是推送的，可以是Ajax请求的，数据源就是Json字符串

解析Json，循环获得对象数组，每循环一次增加一行，然后根据属性在行中增加单元格和增加单元格的内容。如果你想，也可以设置行和单元格的样式



当然每次增加前要先清除掉除标题以外的所有行，然后再增加

删除单元格的方法： 
// 删除所有行，不删除标题行
function fnDeleteXLRow(){
	var table = document.getElementById('proc');
	var rowCount = table.rows.length; // 获得一共多少行，因为不删除标题，所以索引从 1 开始
	for(var i=1;i<rowCount;i++){
		table.deleteRow(1); // 因为删除一行以后下面的行会顶上来，所以一直删除第一行即可
	}
}

获得有多少行，从索引 1 开始循环一定的次数，每次删除的都是 索引 1 ，因为删除之后下面的会顶上来，这个看一下Excel就明白了



循环对象增加行和列的代码： 

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开始
	row1.insertCell(0).innerHTML="&nbsp;"+u.a; // insertCell插入列，从0开始
	row1.insertCell(1).innerHTML="&nbsp;"+u.b;
	row1.insertCell(2).innerHTML="&nbsp;"+u.c;
	row1.insertCell(3).innerHTML="&nbsp;"+u.d;
}

你也可以这样： 
var row1cell0=row1.insertCell(0);  
// 指定列的样式
row1cell0.className="m_td1";




来指定行或列的样式，不过一般我们把表格设置一个样式引用，然后在该样式中处理就可以了 
<table id="proc" width="98%" border="0" cellspacing="0" cellpadding="0"  class="table0">


样式： 
<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>
个样式只针对该表格生效！

 

运行起来就能看到动态的效果，增加 CollectGarbage(); 方法是为了回收一些内容，不用过于纠结！


转自于：http://cuisuqiang.iteye.com/ ！
分享到：
| EJB3中使用Oracle序列的问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    在本主题"js表格操作，DOM实现数据动态增删查改"中，我们将深入探讨如何使用原生JavaScript通过DOM操作来实现数据在表格中的动态管理。 1. **创建表格**：首先，我们需要在HTML中创建一个基础的表格结构。这通常...

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

    我也赶不上再去研究它，我直接手工写一个算了，虽然没有多好的效果，没有额外的功能，但是实现动态表格数据刷新，还是能充分满足要求的！ 先把代码全部贴出来，只要把这个代码写到HTML中，就能看到效果： &lt;!...

    07-DOM操作表格

    9. **表格数据绑定**：当表格数据来源于服务器时，使用Ajax（异步JavaScript和XML）技术可以动态加载和更新表格。`XMLHttpRequest`对象是Ajax的基础，但现代浏览器更推荐使用`fetch` API。 10. **IntelliJ IDEA配置...

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

    总结起来，"Dom生成表格和实现分页源码"涉及的核心技术包括DOM操作（创建、插入和删除元素）、数据驱动视图（根据数据动态生成表格）、分页算法（计算页数和处理翻页逻辑）以及事件监听（响应用户分页操作）。...

    javascript动态添加表格数据行

    在JavaScript编程中，动态添加表格数据行是一种常见的需求，特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录，提高了用户体验。在这个例子中，我们将探讨如何利用...

    javascript动态操作表格

    在JavaScript中，动态操作表格是一项常见的任务，尤其在构建数据驱动的Web应用时。下面将详细探讨这个主题，包括如何添加、删除、选择表格以及兼容性问题。 首先，让我们从添加表格开始。在HTML中，表格由`&lt;table&gt;`...

    DOM操作XML文档向表格添加数据.rar

    总结来说，通过DOM操作XML文档向表格添加数据是一项常见的Web开发任务，它涉及XML文档的读取、解析，以及HTML元素的动态创建和更新。这一过程对于构建交互式和数据驱动的Web应用程序至关重要。通过理解并熟练运用DOM...

    js实现表格相同数据合并

    1. **获取表格数据**：使用jQuery选择器选取表格中的单元格（td）元素，然后遍历它们，获取每个单元格中的文本内容。 2. **比较相邻单元格**：比较当前单元格与前一个单元格的内容，如果相同，则进入下一步；否则，...

    js读取json数据动态生成列数不固定的表格

    3. **DOM操作**：在获取到JSON数据并解析为JavaScript对象后，我们需要操作DOM（Document Object Model）来生成表格。HTML的`&lt;table&gt;`元素是创建表格的基础，`&lt;tr&gt;`表示行，`&lt;th&gt;`表示表头，`&lt;td&gt;`表示单元格。我们...

    大数据量高性能前端表格grid 动态加载数据

    总的来说，大数据量高性能前端表格grid通过动态加载数据，结合高效的DOM管理和数据请求策略，实现了对大规模数据集的流畅展示，为用户提供了优质的交互体验。在实际项目中，开发者可以根据需求选择合适的工具和方法...

    js导出html表格中数据示例

    综上所述，JavaScript导出HTML表格数据到Excel涉及DOM操作、数据转换、CSV格式化以及跨浏览器兼容性处理。在实际应用中，应根据项目需求和目标用户的浏览器选择合适的方法。在遇到兼容性问题时，考虑使用第三方库或...

    调用json获取表格动态数据代码.zip

    总结起来，这个项目提供了一个完整的示例，展示了如何在Web应用中使用JavaScript和JSON数据来创建动态表格，并实现一系列交互功能。这对于学习和理解Web前端开发，特别是数据绑定、DOM操作和前后端交互是非常有帮助...

    jquery数据统计饼图+表格动态效果现实

    "jQuery数据统计饼图+表格动态效果实现"是利用JavaScript库jQuery来创建交互式的数据展示方式，结合饼图和表格，使得数据分析更加直观、生动。下面我们将详细探讨这个主题的相关知识点。 1. **jQuery**: jQuery是一...

    老裴帮助关于Javascript动态创建表格的小练习

    在这个特定的练习中，我们将探讨如何使用JavaScript动态地生成表格，这对于构建交互式Web应用或者处理动态数据展示是非常有用的。 在描述中提到的博文链接（已省略）可能提供了一个详细的步骤指南或者示例代码，以...

    javascript表格操作

    总之，“javascript表格操作”涵盖了从基本的DOM操作到复杂的表格数据处理的广泛知识领域。掌握这些技巧不仅能够提升网页的动态性和响应性，还能在实际项目中解决具体问题，提高工作效率。对于前端开发者而言，熟练...

    网页模板——vue实现动态表格数据查询筛选代码.zip

    在本资源中，“网页模板——vue实现动态表格数据查询筛选代码.zip”是一个包含Vue.js实现的动态表格数据查询和筛选功能的代码示例。Vue.js是目前非常流行的前端JavaScript框架，它简化了网页开发，尤其是处理用户...

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

    "基于JavaScript和DOM的动态表单设计及数据提交" 本文讨论了基于JavaScript和DOM的动态表单设计及数据提交的技术。该技术通过对表格树型结构的分析，利用DOM技术实现了一种可动态添加和删除表格的表单。该技术给出...

    JS动态增加删除表格行

    - **数据驱动**：将表格数据存储在JavaScript数组中，增加或删除行时直接操作数组，然后同步更新到DOM，这样可以避免直接操作DOM的频繁操作。 - **动画效果**：添加过渡动画可以使用户体验更好，比如在删除行时淡出...

    js简单表格操作

    例如，在React中，可以使用state管理表格数据，然后渲染表格，实现数据驱动视图的变化。 此外，还可以通过AJAX获取服务器数据，动态填充表格，实现数据的实时更新。例如，使用fetch API获取JSON数据： ```...

Magicbox
Global site tag (gtag.js) - Google Analytics