项目中有个js的功能需求:
数据库表中有两个字段记录数据的两个时间点,要求前端页面动态无刷新获取这两个时间。
如果表中没有时间点,则页面不显示;如果时间点已经存在,则在页面动态插入两行,按照指定的样式显示。
下图中标示出的是其中的一个时间点:
下面是一个时间点的插入示例,主要采用了W3C DOM的标准接口,节点中插入html部分采用了innerHTML。
代码如下:
function genDataRtnTime(){
if(!document.getElementById("midStatus1")){
var trMid = document.createElement("tr");
trMid.setAttribute("id","midStatus1");
trMid.setAttribute("class","itemize");
var tdMid1 = document.createElement("td");
tdMid1.setAttribute("class","TDstyle01");
var tdMid2 = document.createElement("td");
tdMid2.setAttribute("align","center");
tdMid2.setAttribute("class","TDstyle01");
var divTime = document.createElement("div");
divTime.setAttribute("id","time100");
tdMid2.appendChild(divTime);
var tdMid3 = document.createElement("td");
tdMid3.setAttribute("align","left");
tdMid3.setAttribute("class","TDstyle01");
var spanStatus = document.createElement("span");
spanStatus.setAttribute("id","statusMid100");
spanStatus.setAttribute("height","auto");
tdMid3.appendChild(spanStatus);
trMid.appendChild(tdMid1);
trMid.appendChild(tdMid2);
trMid.appendChild(tdMid3);
var statusGTSNode = document.getElementById("trStatus");
statusGTSNode.parentNode.insertBefore(trMid,statusGTSNode);
document.getElementById("statusMid100").innerHTML=" <strong>The data has been returned</strong>";
document.getElementById("time100").innerHTML = rtnData[0].dataRtnTime;
}
}
- 大小: 31.1 KB
分享到:
相关推荐
Dom基础—创建表格 利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。但第一种有可能在IE上有问题,所以推荐使用第二种。 1、insertRow(index):index从0开始 这个函数将新行添加到index的...
一开始使用的是html2canvas.js。功能是可以实现,但是有缺陷(表格存在合并的单元格时,生成的图片表格线框不完整),后来很不容易知道了dom-to-image.js,尝试之后觉得非常不错
标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var caption...
主要介绍了JS控制网页动态生成任意行列数表格的方法,实例分析了javascript操作表格节点控制dom元素添加的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
用DOM控制的奇偶行变色的简单表格实现,通过javascript实现对奇偶行的表格背景颜色的控制
3.创建自定义表格(输入自定义行数和列数点击按钮即可生成表格) 4.时钟(显示当前动态时间) 5.关联下拉列表:选中第一个下拉列表国家,第二个下拉列表只显示对应国家的城市 6.点击按钮弹出带选项小页面,选中选项...
detailview.js可方便地生成子网格,但是每行均默认生成展开按钮,实际我们希望对某些行不显示展开按钮,网上很多人提供的解决方案就是通过dom操作将生成的展开按钮删除掉,但是这个展开按钮是动态生成的,通过dom...
一个简单HTML图表生成器,可帮助您在短短一秒钟内轻松创建简单而优雅HTML图表。 :police_car_light:“ woowahan-pie”现已弃用。 请改用“ woowahan-chart”。 Woowahan Chart一个简单HTML图表生成器,可帮助您在短...
QRCode.js是用于生成qrcode(二维码)的javascript库。QRCode.js通过HTML5 Canvas和DOM中的表格标签支持跨浏览器。QRCode.js不依赖任何其他库。 首先需要下载QRCode文件 下载地址 ...
javascript完全自学手册 目 录 第1篇 JavaScript基础篇 第1章 JavaScript简介 1 1.1 JavaScript概述 1 1.1.1 什么是JavaScript 1 1.1.2 JavaScript的基本特点 2 1.1.3 常用的Web开发语言 3 1.2 JavaScript的应用 4 ...
一个用于生成二维码图片的插件,使用方便简单,插件提供了大量的可选自定义参数和回调函数,方便我们自定义配置插件的显示效果,生成的二维码基本都能识别,QRcode.js支持DOM的跨浏览器的HTML5画布和表格标签。...
9.22 动态生成包含合并单元格的表格 9.23 用键盘上下键实现表格行的上下选择 9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的...
9.22 动态生成包含合并单元格的表格 9.23 用键盘上下键实现表格行的上下选择 9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的...
8.5.5 更改表格间隔背景色 第9章 JavaScript中的XML 9.1 XML语言 9.1.1 XML概述 9.1.2 XML文档结构 9.1.3 XML标记 9.1.4 XML文档元素 9.1.5 XML属性 9.1.6 XML命名空间 9.2 XMLDOM 9.2.1 通用...
《JavaScript基础教程(第8版)》循序渐进地讲述了JavaScript及相关的CSS、DOM、Ajax、jQuery等技术。书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上...
示例描述:介绍JavaScript与Microsoft Office互操作的方法。 14.1.html 使用JavaScript向Word中写入内容。 14.2.html 使用JavaScript从Word中读取内容。 14.3.html 使用JavaScript向Excel文件中写入内容...
一、实习过程 1. 编写JavaScript程序实现 “九九...10.直接利用Javascript操作DOM模型,将当前目录下的10张图片循环显示在网页上。 12. 在状态栏上显示,访问者在本页停留的时间(如:您在本页停留了X小时X分X秒)。
主要介绍了JS实现向表格行添加新单元格的方法,涉及javascript针对表格进行动态操作的技巧,需要的朋友可以参考下
11.2.2 动态生成的文档 11.2.3 Document对象的基本信息 11.2.4 Document对象的外观属性 11.2.5 Document子对象接口 11.2.5.1 一个遍历Anchors对象的例子 11.2.5.2 一个颠倒图片的例子 ...
EasyQRCodeJS EasyQRCodeJS is a feature-rich cross-browser pure JavaScript QRCode generation library....EasyQRCodeJS 是一个功能丰富的跨浏览器的纯 JavaScript QRCode 生成库。支持 Canvas, SV