javascripte-appendChild()
编程技术 / houtizong 发布于 3年前 104
- 在Table标签下appendChild()动态添加tr时,使用不是将tr直接加到TBody里.
而是先动态加载TBody,等TBody加载完以后再去加载appendChild命令添加的动态tr标签.
这样就会出现IE浏览器解析不出我们想要的结果.解决方法是:tab.tBody[0].appendChild(tr)(tab为Table的id得到的对象,tr为你动态创建的对象!)
例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DynamicTable.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
function creatTable(){
var links = {"百度":"www.baidu.com","新浪":"www.sina.com","人人":"www.renren.com"};
var tab = document.getElementById("tab");
for(var key in links){
/*var link = links[key];
var tr = document.createElement("tr");
var tdName = document.createElement("td");
tdName.innerText = key;
var tdHref = document.createElement("td");
tdHref.innerHTML = "<a href='"+links[key]+"'>"+links[key]+"</a>";
tr.appendChild(tdName);
tr.appendChild(tdHref); IE下不支持appendChild(),IE是把动态的东西加到Tbody里,所以解析错误!
tab.appendChild(tr);*/
/* var link = links[key];
var tr = tab.insertRow();
var tdName = tr.insertCell();
tdName.innerText = key; 仅IE好用,FireFox 不怎么支持!!!
var tdHref = tr.insertCell();
tdHref.innerHTML = "<a href='"+links[key]+"'>"+links[key]+"</a>";*/
var link = links[key];
var tr = document.createElement("tr");
var tdName = document.createElement("td");
tdName.innerText = key;
var tdHref = document.createElement("td");
tdHref.innerHTML = "<a href='"+links[key]+"'>"+links[key]+"</a>";
tr.appendChild(tdName);
tr.appendChild(tdHref);
tab.tBodies[0].appendChild(tr)
}
}
</script>
</head>
<body>
This is my HTML page.
<br>
<table id="tab"></table>
<input type="button" value="创建Table" onclick="creatTable()" />
</body>
</html>
上一篇：Hibernate的主键生成机制
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
