js操作Dom生成动态表格-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_6401/article/details/81893055

本文介绍了一个JavaScript函数，用于根据数据库中的时间记录动态地在前端页面上插入时间点。如果数据库中存在时间点，则通过W3CDOM标准接口创建并插入相应的HTML元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中有个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;
  }
}