传智播客学习笔记(动态创建表格的兼容性)
第一种方法:不兼容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>