在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>
分享到：
相关推荐
rightContainer.appendChild(detailElement); }); ``` 以上就是实现框中左右选择的基本步骤。在实际开发中，还需要根据具体需求进行优化，如添加动画效果、错误处理、无障碍访问支持等。同时，随着前端框架的发展...
document.body.appendChild(newLink); ``` 在实际项目中，通常推荐使用CSS来处理这种基础样式问题，因为它更高效且易于维护。然而，如果场景特殊或有特定需求，JavaScript同样能提供解决方案。在本例中，`去掉...
在JavaScript编程中，"首页添加"通常指的是在网站的首页实现一些动态效果或者交互功能，以便提高用户体验。这里，我们主要关注的是如何使用JavaScript技术来处理"菜单添加"这一任务，即在网页的首页上创建、操作或者...
\r\n \r\n \r\n \r\n \r\n \u8f6f\u4ef6\u9996\u9875\r\n \u8f6f\u4ef6\u4e0b\u8f7d\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\nwindow.changyan.api.config({\r\nappid:...
JavaScript：定义行为和动作 (基于对象和事件驱动的客户端脚本语言；也是一种广泛应用于客户端Web开发的脚本语言) 基于对象：网页中的一切元素都是假象！不需要new，即可直接使用 事件驱动：JavaScript的执行都是...
E-mail验证** - 检查输入的数据是否符合电子邮件地址的基本格式。 - 需包含`@`符号及至少一个`.`符号。 以上是对标题为“JavaScript笔记和源码”以及描述中提到的知识点的详细解释。这些知识点覆盖了JavaScript...
3. **操作节点**：`appendChild`用于在指定位置添加新节点，`removeChild`删除节点，`insertBefore`在已存在节点前插入新节点，`replaceChild`替换节点。 4. **修改节点内容**：`innerHTML`属性可以获取或设置元素...
在"E-commerce-Web-app"项目中，我们主要探讨的是如何构建一个基于JavaScript的电子商务Web应用程序。JavaScript作为前端开发的核心语言，对于构建动态、交互性强的Web应用至关重要。在这个项目中，我们将深入理解...
根据提供的文件信息，本文将详细解释“javascript上传下载代码”这一主题所涉及的关键知识点，包括JavaScript如何实现文件的上传与下载功能，以及如何在Java环境中使用这些功能。 ### JavaScript文件上传原理 ####...
- **appendChild(element)**: 将`element`添加到当前节点的末尾作为子元素。 - **insertBefore(newElement, existingElement)**: 在`existingElement`之前插入`newElement`。 - **insertAfter(newElement, ...
4. **DOM操作**：通过JavaScript可以改变HTML元素的属性、内容和样式，如`document.getElementById()`、`appendChild()`等。 5. **事件处理**：如点击事件、提交事件等，使用`addEventListener()`添加事件监听器。 6...
创建元素后，我们可以设置其属性，如`type`、`value`、`onclick`等，通过`.setAttribute()`方法或直接赋值方式，如`e.type = "text"`。 `appendChild()` 方法用于将新创建的元素添加到指定父节点的子节点列表的末尾...
document.head.appendChild(style); } ``` #### 50. **在HTML中嵌入脚本**: - **功能**：在HTML文档中嵌入JavaScript脚本。 - **应用场景**：动态生成或更新页面内容。 - **示例代码**： ```html document....
第<span id="a2"></span>/<span id="a1"></span>页 <span id="a3"></span>... document.getElementById("all").appendChild(div);//加入all中 if(zz[(e-1)*pagesize+i+1]==null)//超出范围跳出 break } var ye="
5. **DOM操作**：使用`document.createElement`, `appendChild`, `innerHTML`等方法进行DOM操作，添加、删除或修改元素。 6. **状态管理**：Todo应用通常有“全部”、“已完成”和“未完成”三种过滤方式。使用`...
e.appendChild(option); } } } ``` 5. **遍历XML节点**： - 通过遍历XML节点，可以获取需要的数据。 - 示例代码：`xmlDoc.documentElement.childNodes(0).nodeName;` 以上就是从给定文件中提取出来的关键...
JavaScript 树形菜单是一种在网页中展示层次结构数据的有效方式，通常用于导航、目录或文件系统等场景。这种菜单以可折叠的节点形式呈现，用户可以通过展开或折叠节点来探索和交互。在JavaScript中实现树形菜单，...
在网页开发中，JavaScript是一种必不可少的脚本语言，它为网页增添了交互性和动态性。本文将深入探讨如何使用JavaScript来创建可变化、可编辑的表格，以实现更丰富的用户界面。 首先，我们要明白HTML表格的基本结构...
在JavaScript中创建一个待办事项（Todo List）应用是一项常见的编程练习，它能帮助开发者熟悉基本的前端开发技能，如DOM操作、事件处理以及数据管理。在这个项目中，我们将深入探讨如何利用JavaScript实现一个功能...
常用方法包括`getElementById`、`getElementsByClassName`、`querySelectorAll`等选择器，以及`appendChild`、`removeChild`等操作方法。 **异步编程**：为了解决阻塞问题并提高程序响应能力，JavaScript引入了事件...