3.4 js生成报表

js可以创建、删除、修改html标签,比如我们可以使用js动态生成表格。

如下函数示意在ID为tbHost的元素内追加一个表格:假设nodes为二维数组,遍历其所有行和列,将其元素的Ap属性以二维表格的形式显式出来。通过该函数可以直观观察到二维数组的内容。

1. function DebugInfo(tbHost){
2.  var table=document.createElement("table"); //生成一个表格
3.    table.setAttribute("border","1"); //设置其表格线条样式宽度
4.    table.setAttribute("align","center"); //设置居中
5.  
6.  for(var row=this.yDim;row>=1;row--){//遍历行
7.  var tr=document.createElement("tr"); //创建一行
8.  for(varcol=1;col<=this.xDim;col++){ //遍历列
9.  var td=document.createElement("td"); //每行创建若干列元素
10.          td.innerHTML=nodes[col][row].aP.toFixed(1); //设置单元格内容,保留有效数字1位
11.          tr.appendChild(td); //将刚刚生成的列信息添加到行
12.       }
13.       table.appendChild(tr); //对表格添加行
14.    }
15.  document.getElementById(tbHost).appendChild(table); //将ID为tbHost的元素内追加该表格
16. }

根据注释理解动态生成报表的思路和方法。

本文分享自微信公众号 - 传输过程数值模拟学习笔记(SongSimStudio)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-07-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏weixuqin 的专栏

Scrapy选择器的用法

375120
来自专栏Android中高级开发

深入分析Android动画(一)

  View动画顾名思义其作用对象为View,包含平移、缩放、旋转、透明,这四类变化分别对应着Animation的子类TranlateAnimation、Sca...

12840
来自专栏前端笔记

【 前端相关 网页样式 】总结CSS3中“伪类”与“伪元素”

熟悉前端的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用...

35870
来自专栏闻道于事

CSS样式表基础

层叠样式表:Cascading Style Sheets,是一种用来表现HTML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态...

28450
来自专栏javascript趣味编程

2.2.2 HTML标签简介

HTML(HyperText Mark-up Language)是由HTML标签嵌套和组合的描述性文本,HTML标签可以描述文本(p,div等)、表格(tabl...

22000
来自专栏个人随笔

初识CSS3

1.CSS规则由两部分构成,即选择器和声明器    声明必须放在{}中并且声明可以是一条或者多条    每条声明由一个属性和值构成,属性和值用冒号分开,每条语句...

34880
来自专栏web前端教室

html5-canvas刮刮卡实例-圆形刮痕

知识点 1、globalCompositeOperation属性,该属性表示的是图形的组合方式 2、使用到的是destination-out,它表示只绘制原图形...

26480
来自专栏听雨堂

Android新手之旅(9) 自定义的折线图

  希望实现一个折线图,但没有找到合适的控件或者代码,只有一个基本样子的,在它的基础上,进行了一些改进,改得比较灵活,可以传递参数,可以设置位置,坐标轴长度,刻...

36260
来自专栏分享达人秀

手把手教你读懂源码,View的绘制流程详细剖析

上一篇文章我们分析了View的加载流程,今天我们继续来深入学习View的绘制流程,接着上次的View绘制开始,同样使用的是Android 7.1源码。 ...

224100
来自专栏大数据钻研

HTML5新增及移除的元素

HTML经过10多年的发展,其元素经历了废弃与不断重新定义的过程。为了更好的处理现在的互联网应用,HTML5新增了图形绘制、多媒体播放、页面结构、应用程序存储、...

31680

扫码关注云+社区

领取腾讯云代金券