js动态给table添加内容并显示

js动态给table添加内容并显示,第1张

给你思路,table的tr就是你要插入的内容,td就是值,点击的时候获取上面的值,分别放入td中,就可以最后用table对象append就可以了,至于tr对象你可以自己写一个html模板,或者用插件模板都可以比如jquerytemplate插件。

可以直接用document.getElementById("divid").innerHTML = "<p>内容</p>"的方式来写。

多个可以循环进行处理。

假设段落文本是个数组:array。

可以通过for (var i = 0i <array.lengthi++) {document.getElementById("divid").innerHTML = "<p>"+array[i]+"</p>"}的方式进行处理。

延展:

如果段落过多,直接使用 div.appendChild方法会不段刷新DIV对象,影响运行速度。

正确的方法应该使用 document对象的碎片方法。

document.createDocumentFragment 容器,最后再将这些碎片返回给DIV对象比较合理,例如:

var strArrayList=[]// 创建一个段落文本数组对象,这些段落文本可能是100个也可能是1000个。

strArrayList[0]='数据111.......'

strArrayList[1]='数据.......'

strArrayList[2]='数据.......'

strArrayList[3]='数据.......'

strArrayList[4]='数据.......'

//...数据n.....

var div=document.getElementById('div1')//获得DIV对象。

var f=document.createDocumentFragment()//创建碎片对象。

for(var i=0i<strArrayList.lengthi++){

var p=document.createElement('P')//动态创建P标签。

p.appendChild(document.createTextNode(strArrayList[i]))//段落字符串。

f.appendChild(p)//附加到碎片对象中。

}

div.appendChild(f)//最后返给DIV对象。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11931806.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存