`

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
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics