`
cn_xiaozhi
  • 浏览: 3597 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

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

js动态表格jsondomhtml 
阅读更多 
<!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(); 方法是为了回收一些内容，不用过于纠结！

分享到：
| Spring Struts2 零配置
评论
发表评论

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

相关推荐

    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