javascript动态创建表格及添加数据实例详解
本文实例讲述了javascript动态创建表格及添加数据的方法。分享给大家供大家参考。具体分析如下：
1.动态创建表格（代码不兼容IE6）
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>动态创建表格</title>
<scripttype="text/javascript">
functionAppendTableData(){
vartable=document.getElementById("tblMain");
vardata={"百度":"http://www.baidu.com",
"毛票票":"https://www.nhooo.com",
"搜狐":"http://www.sohu.com"
};
for(varkeyindata){
vartr=document.createElement("tr");
vartd1=document.createElement("td");
td1.innerText=key;
//FireFox不支持innerText,只能使用innerHTML
tr.appendChild(td1);
vartd2=document.createElement("td");
td2.innerHTML="<ahref='"+data[key]+"'>"+data[key]+"</a>";
tr.appendChild(td2);
table.appendChild(tr);
}
}
</script>
</head>
<body>
<tableid="tblMain"></table>
<inputtype="button"value="动态添加网格数据"
onclick="AppendTableData()"/>
</body>
</html>
2.动态创建表格（兼容IE6、IE7）
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>添加网格数据(处理了IE兼容问题)</title>
<scripttype="text/javascript">
functionAppendData(){
vardata={"毛票票":"https://www.nhooo.com",
"百度":"http://www.baidu.com",
"搜狐":"http://www.sohu.com"};
vartable=document.getElementById("tblMain");
for(varkeyindata){
varvalue=data[key];
vartr=table.insertRow(-1);
//FireFox必须使用-1这个参数
vartd1=tr.insertCell(-1);
td1.innerText=key;
vartd2=tr.insertCell(-1);
td2.innerHTML="<ahref='"+value+"'>"+value+"</a>";
}
}
</script>
</head>
<body>
<tableborder="1"id="tblMain"></table>
<inputtype="button"value="添加网格数据(处理了IE兼容问题)"
onclick="AppendData()"/>
</body>
</html>
3.动态创建表格（兼容IE6、IE7）
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>动态创建表格(处理IE6兼容问题)</title>
<scripttype="text/javascript">
functionAppendTableData(){
vartable=document.getElementById("tblMain");
vardata={"百度":"http://www.baidu.com",
"毛票票":"https://www.nhooo.com",
"搜狐":"http://www.sohu.com"
};
for(varkeyindata){
vartr=document.createElement("tr");
vartd1=document.createElement("td");
td1.innerText=key;
tr.appendChild(td1);
vartd2=document.createElement("td");
td2.innerHTML="<ahref='"+data[key]+"'>"+data[key]+"</a>";
tr.appendChild(td2);
//table.appendChild(tr);把这一句替换掉
table.tBodies[0].appendChild(tr);
}
}
</script>
</head>
<body>
<!--由于动态添加的数据在debugbar中看生成的HTML代码发现，
会自动添加一个<tbody>
并且内容是空的，把我们动态生成的数据给冲掉了，
所以我们手工添加一个<tbody>
tr添加到这个<tbody>下面
-->
<tableid="tblMain"><tbody></tbody></table>
<inputtype="button"value="动态添加网格数据"
onclick="AppendTableData()"/>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。