第一种方法：不兼容IE6 7 代码跟第二方法js一样 只是js的函数要修改一下
function btnTable(){
var tableName=document.getElementById("tables");
var data={"百度":"http://www.baidu.com","谷歌":"http://www.google.cn","新浪":"http://www.sina.com"};
for(var key in data){
var value=data[key];
var tr=document.createElement("tr");
var td1=document.createElement("td");
td1.innerHTML=key;
tr.appendChild(td1);
var td2=document.createElement("td");
td2.innerHTML="<a href='"+value+"'>"+key+"</a>";
tr.appendChild(td2);
tableName.appendChild(tr);
}
}
第二种方法：兼容所有浏览器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function btnTable(){
var tableName=document.getElementById("tables");
var data={"百度":"http://www.baidu.com","谷歌":"http://www.google.cn","新浪":"http://www.sina.com"};
for(var key in data){
var value=data[key];
var tr=tableName.insertRow(-1);
//创建第一个单元格
var td1=tr.insertCell(-1);
td1.innerText=key;
//创建第二个单元格
var td2=tr.insertCell(-1);
td2.innerHTML="<a href='"+value+"'>"+key+"</a>";
}
}
</script>
</head>
<body>
<table id="tables"></table>
<input type="button" value="动态创建表" onclick="btnTable();" />
</body>
</html>
分享到：
相关推荐
标题中的“传智播客课件笔记集合”指的是一个综合性的学习资源包，包含了传智播客教育机构的多个课程资料。传智播客是一家知名的IT培训机构，专注于提供高质量的编程和技术培训，其课程覆盖了从基础到高级的各类IT...
3. **动态SQL**：MyBatis支持动态SQL功能，这意味着可以根据不同的条件动态生成SQL语句，大大减少了代码的冗余和重复性工作。 ```xml WHERE column = #{value} ``` 4. **对象映射**：MyBatis支持自动将...
传智播客是一家知名的教育机构，提供各种IT技术的培训课程，包括Java。这篇学习笔记系列结合了Java的基础知识和进阶概念，旨在帮助学习者系统地理解和掌握Java编程。 1. **Java基础** - **变量与数据类型**：Java...
**传智播客FCKeditor笔记** FCKeditor是一款开源的网页文本编辑器，它允许用户在网页上编辑内容，...这份笔记是基于传智播客的课程整理而成，希望能对你的学习有所帮助，如果你觉得有价值，不妨分享给更多需要的人。
《毕向东传智播客详细笔记》是一份深入浅出的Java学习资源，由知名IT教育专家毕向东在传智播客的授课内容整理而成。这份笔记以丰富的图文并茂的形式，为Java初学者提供了全面而细致的学习路径，是网络教学的优秀参考...
根据提供的信息来看，这份文档似乎是一份个人的学习笔记，主要关注的是与传智播客相关的IT技术内容。传智播客是一家知名的IT培训机构，提供多种IT领域的培训课程和技术资料，帮助学员掌握最新的技术和开发方法。下面...
"传智播客JS笔记"提供了一套全面且易于理解的学习资源，特别适合初学者掌握JavaScript的基础和核心概念。以下是对笔记中可能包含的重要知识点的详细解释： 1. **变量与数据类型**：JavaScript 支持动态数据类型，这...
### 传智播客JPA学习笔记知识点梳理 #### 一、JPA概述与核心价值 - **定义**: JPA (Java Persistence API) 是由 Sun 官方提出的一种 Java 持久化标准，旨在为 Java 开发者提供一套统一的对象-关系映射 (ORM) 工具，...
传智播客_Springmvc+Mybatis由浅入深笔记与资料,内容最全.
边看传智播客lamp的视频，别做的笔记.
通过这些文件，学习者不仅可以学习到C#字符串的基础知识，还可以了解到传智播客的教学理念和行业动态，同时获取学习和职业发展的指导。对于想要入门前端或后端开发，特别是.NET平台的开发者来说，这是一个非常有价值...
【传智播客C++课程笔记】是一份来自国内知名计算机软件培训机构——传智播客的C++教学资源。这份笔记全面涵盖了C++语言的核心概念和技术，旨在帮助学习者深入理解并掌握C++编程，从而在实际开发中游刃有余。 C++是...
【传智播客QT教程文档】是一份由知名IT培训机构传智播客推出的关于QT开发的教程资料。QT是一个跨平台的应用程序开发框架，广泛应用于桌面应用、移动应用以及嵌入式系统。这个教程旨在帮助学习者深入理解QT，通过通俗...
这份“传智播客崔希凡javaweb笔记完整版”是针对这一领域的深入学习资料，旨在帮助开发者掌握JavaWeb开发的关键技能。 首先，我们要了解JavaWeb的基础，它基于Java平台，提供了构建动态网站和Web应用程序的能力。...
这个“传智播客javase全套笔记”包含了全面的Java基础知识，是学习和复习Java SE的重要参考资料。 首先，从“JavaSE重点知识点总结.doc”我们可以预想这是一份详细整理的Java核心知识点文档，可能涵盖了以下几个...
"Javascript学习笔记（传智播客视频学习笔记+代码）"是一份全面介绍JavaScript基础知识的学习资源，适用于初学者。这份笔记结合了传智播客的web前端培训视频内容，提供了丰富的理论讲解和实践代码，帮助读者从零开始...
《传智播客Springmvc+mybatis由浅入深学习笔记》是一套全面解析Springmvc和Mybatis两大主流Java框架的教程，旨在帮助初学者和进阶者深入理解这两个技术的核心概念和应用。该资源包括了四部分课堂笔记，分别是...
传智播客_hibernate李勇笔记是在学习李勇老师讲的hibernate3.2.5后整理的笔记
总之，这份“传智播客2016spring资料4”是Spring框架学习的重要资源，涵盖了一系列核心概念和技术，对于想深入理解和掌握Spring框架的人来说，是非常宝贵的参考资料。通过学习这些内容，开发者能够提升自己的技能，...