`

js操作Dom生成动态表格

阅读更多

项目中有个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="&nbsp;<strong>The data has been returned</strong>";
    document.getElementById("time100").innerHTML = rtnData[0].dataRtnTime;
  }
}

  

  • 大小: 31.1 KB
分享到:
评论

相关推荐

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

    在这个场景中,“Dom生成表格和实现分页源码”指的是利用DOM操作动态生成表格,并且集成分页功能的代码实践。 首先,我们来详细探讨如何使用DOM生成表格。在HTML中,表格由`&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;th&gt;`(表头)...

    js动态生成表格

    总结,JS动态生成表格的核心在于理解和操作DOM,以及处理数据与视图的同步。熟练掌握这些技能后,你可以根据需求创建各种复杂的动态表格,为用户提供丰富的交互体验。在实际项目中,结合现代前端框架和第三方库,...

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

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

    js动态生成table

    在JavaScript中,动态生成table是一种常见的网页交互功能,它允许我们根据需求在页面上实时创建、添加或删除表格行(tr...同时,配合现代前端框架(如React、Vue或Angular),动态生成表格的能力将变得更加高效和灵活。

    js生成各种统计图表

    3. **D3.js**:Data-Driven Documents的简称,是一个强大的数据可视化库,它允许开发者利用SVG、Canvas或WebGL来直接操作DOM,构建复杂的动态图表。 4. **Chart.js**:轻量级的图表库,适合快速创建简单的图表,...

    基于jQuery和layui的form表单自定义js动态生成

    jQuery是一个强大的JavaScript库,它简化了DOM操作,事件处理,动画效果以及Ajax交互。而layui是一款优秀的前端UI框架,提供了丰富的组件和美观的样式,使得前端页面的构建更加便捷。 一、jQuery基础 jQuery的核心...

    dom-to-image.js

    一开始使用的是html2canvas.js。功能是可以实现,但是有缺陷(表格存在合并的单元格时,生成的图片表格线框不完整),后来很不容易知道了dom-to-image.js,尝试之后觉得非常不错

    JS实现动态生成表格并提交表格数据向后端

    在本文中,我们将探讨如何使用JavaScript(JS)动态生成表格,并将表格中的数据提交到后端服务器。动态生成表格是Web开发中常见的需求,特别是在需要用户输入数据并提交给服务器进行处理的场景中。掌握这一技能对于...

    javascript动态生成页面元素

    在现代Web开发中,JavaScript作为前端...随着前端框架和库的普及,如React、Vue等,这些工具已经封装了大量的DOM操作,使得动态生成页面元素变得更加简单高效,但了解底层原理仍然是每一个前端开发者不可或缺的基础。

    js动态生成表格行列特效.zip

    在JavaScript编程中,动态生成表格是一项常见的需求,特别是在网页交互设计中。本示例"js动态生成表格行列特效.zip"提供了实现这一功能的实例代码,包括HTML5、JavaScript和CSS三部分,允许开发者创建出具有视觉吸引...

    js动态表格--行操作

    在实际应用中,可能还需要考虑更多的细节,如事件监听(例如点击行进行操作)、数据绑定(如AJAX获取数据并动态生成表格)以及用户交互反馈等。熟练掌握这些技术,可以构建出具有高度交互性和灵活性的Web界面。

    JavaScript实现动态生成表格

    总结来说,JavaScript动态生成表格是网页开发中常见的一种功能,它通过获取用户输入、构建HTML字符串和操作DOM来实现。理解这个过程有助于开发者创建更复杂、更动态的网页交互效果。通过不断学习和实践,可以进一步...

    jQuery一个非常流行的操作Dom的JavaScript库

    **jQuery:DOM操作的JavaScript库** jQuery是一款广泛应用于Web开发的JavaScript库,它极大地简化了JavaScript对DOM(Document Object Model)的操作,同时也提供了丰富的事件处理、动画效果和Ajax交互功能。自2006...

    JS生成统计图表

    首先,我们要了解JavaScript作为一种客户端脚本语言,在网页中运行,可以与用户互动,处理DOM元素,以及执行复杂的计算,包括生成动态图表。统计图表可以帮助我们展示大量数据,如折线图、柱状图、饼图、散点图等,...

    动态生成表格

    这篇博文“动态生成表格”可能探讨了如何在网页上动态创建和更新表格,以满足用户实时查看和操作数据的需求。下面将详细阐述动态生成表格的相关知识点。 首先,动态生成表格的基础是HTML表格元素,如`&lt;table&gt;`, `...

    ajax数据库真分页和DOM生成

    "Ajax数据库真分页和DOM生成"是一个核心概念,它涉及到如何高效地利用AJAX(Asynchronous JavaScript and XML)技术来实现在不刷新整个页面的情况下更新内容,以及如何通过DOM(Document Object Model)动态生成和...

    jsDom编程笔记01

    在动态操作表格时,这些技能尤其重要,可以实现表格的增删查改。 在DOM操作中,有时需要获取或设置自定义属性,这可以通过`getAttribute`和`setAttribute`方法实现。值得注意的是,浏览器的DOM预览窗口可能不显示...

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

    标题中的“老裴帮助关于Javascript动态创建表格的小练习”指的是一个使用...这个练习对于初学者来说是很好的实践机会,通过它,开发者可以提升对JavaScript动态操作DOM的理解,同时也能了解到前后端协作的基本流程。

    最简单的动态生成表格并实现不同框架打印

    在IT领域,动态生成表格和跨框架交互是网页开发中的常见需求。动态表格允许开发者根据用户操作或服务器数据实时更新页面内容,而框架结构则能帮助组织和管理复杂的页面布局。下面将详细解释这两个概念以及如何实现...

Global site tag (gtag.js) - Google Analytics