项目中有个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生成表格和实现分页源码”指的是利用DOM操作动态生成表格,并且集成分页功能的代码实践。 首先,我们来详细探讨如何使用DOM生成表格。在HTML中,表格由`<table>`、`<tr>`(行)、`<th>`(表头)...
总结,JS动态生成表格的核心在于理解和操作DOM,以及处理数据与视图的同步。熟练掌握这些技能后,你可以根据需求创建各种复杂的动态表格,为用户提供丰富的交互体验。在实际项目中,结合现代前端框架和第三方库,...
3. **DOM操作**:在获取到JSON数据并解析为JavaScript对象后,我们需要操作DOM(Document Object Model)来生成表格。HTML的`<table>`元素是创建表格的基础,`<tr>`表示行,`<th>`表示表头,`<td>`表示单元格。我们...
在JavaScript中,动态生成table是一种常见的网页交互功能,它允许我们根据需求在页面上实时创建、添加或删除表格行(tr...同时,配合现代前端框架(如React、Vue或Angular),动态生成表格的能力将变得更加高效和灵活。
3. **D3.js**:Data-Driven Documents的简称,是一个强大的数据可视化库,它允许开发者利用SVG、Canvas或WebGL来直接操作DOM,构建复杂的动态图表。 4. **Chart.js**:轻量级的图表库,适合快速创建简单的图表,...
一开始使用的是html2canvas.js。功能是可以实现,但是有缺陷(表格存在合并的单元格时,生成的图片表格线框不完整),后来很不容易知道了dom-to-image.js,尝试之后觉得非常不错
jQuery是一个强大的JavaScript库,它简化了DOM操作,事件处理,动画效果以及Ajax交互。而layui是一款优秀的前端UI框架,提供了丰富的组件和美观的样式,使得前端页面的构建更加便捷。 一、jQuery基础 jQuery的核心...
在本文中,我们将探讨如何使用JavaScript(JS)动态生成表格,并将表格中的数据提交到后端服务器。动态生成表格是Web开发中常见的需求,特别是在需要用户输入数据并提交给服务器进行处理的场景中。掌握这一技能对于...
在现代Web开发中,JavaScript作为前端...随着前端框架和库的普及,如React、Vue等,这些工具已经封装了大量的DOM操作,使得动态生成页面元素变得更加简单高效,但了解底层原理仍然是每一个前端开发者不可或缺的基础。
在JavaScript编程中,动态生成表格是一项常见的需求,特别是在网页交互设计中。本示例"js动态生成表格行列特效.zip"提供了实现这一功能的实例代码,包括HTML5、JavaScript和CSS三部分,允许开发者创建出具有视觉吸引...
在实际应用中,可能还需要考虑更多的细节,如事件监听(例如点击行进行操作)、数据绑定(如AJAX获取数据并动态生成表格)以及用户交互反馈等。熟练掌握这些技术,可以构建出具有高度交互性和灵活性的Web界面。
总结来说,JavaScript动态生成表格是网页开发中常见的一种功能,它通过获取用户输入、构建HTML字符串和操作DOM来实现。理解这个过程有助于开发者创建更复杂、更动态的网页交互效果。通过不断学习和实践,可以进一步...
**jQuery:DOM操作的JavaScript库** jQuery是一款广泛应用于Web开发的JavaScript库,它极大地简化了JavaScript对DOM(Document Object Model)的操作,同时也提供了丰富的事件处理、动画效果和Ajax交互功能。自2006...
首先,我们要了解JavaScript作为一种客户端脚本语言,在网页中运行,可以与用户互动,处理DOM元素,以及执行复杂的计算,包括生成动态图表。统计图表可以帮助我们展示大量数据,如折线图、柱状图、饼图、散点图等,...
这篇博文“动态生成表格”可能探讨了如何在网页上动态创建和更新表格,以满足用户实时查看和操作数据的需求。下面将详细阐述动态生成表格的相关知识点。 首先,动态生成表格的基础是HTML表格元素,如`<table>`, `...
"Ajax数据库真分页和DOM生成"是一个核心概念,它涉及到如何高效地利用AJAX(Asynchronous JavaScript and XML)技术来实现在不刷新整个页面的情况下更新内容,以及如何通过DOM(Document Object Model)动态生成和...
在动态操作表格时,这些技能尤其重要,可以实现表格的增删查改。 在DOM操作中,有时需要获取或设置自定义属性,这可以通过`getAttribute`和`setAttribute`方法实现。值得注意的是,浏览器的DOM预览窗口可能不显示...
标题中的“老裴帮助关于Javascript动态创建表格的小练习”指的是一个使用...这个练习对于初学者来说是很好的实践机会,通过它,开发者可以提升对JavaScript动态操作DOM的理解,同时也能了解到前后端协作的基本流程。
在IT领域,动态生成表格和跨框架交互是网页开发中的常见需求。动态表格允许开发者根据用户操作或服务器数据实时更新页面内容,而框架结构则能帮助组织和管理复杂的页面布局。下面将详细解释这两个概念以及如何实现...