JavaScript动态创建table表格
分类：实例代码
JavaScript动态创建table表格属于前端实例代码，有关更多实例代码大家可以查看。
分享一段代码实例，能够动态的创建一个表格并且填充表格数据。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
caption{
padding:0 0 5px 0;
width:450px;
font:italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align:right;
}
td{
border:1px solid #c1dad7;
padding:6px 6px 6px 12px;
color:#4f6b72;
text-align:center;
width:150px;
}
</style>
<script type="text/javascript">
var data=[{name:'前端教程网一',age:3,gender:'市南区'},{name:'前端教程网二',age:3,gender:'市南区'},{name:'前端教程网三',age:3,gender:'市南区'},{name:'前端教程网四',age:3,gender:'市南区'}];
onload = function(){
var body=document.getElementsByTagName('body')[0];
body.appendChild(createTable(data));
};
var createTable = function(data){
var table=document.createElement('table');
table.setAttribute('style','width: 450px;');
var caption=document.createElement('caption');
caption.innerHTML ='网站介绍';
table.appendChild(caption);
table.appendChild(createTr('名称','年龄','地址'));
table.childNodes[1].setAttribute('style','background:#cae8ea;');
for(var i=0;i<data.length;i++){
table.appendChild(createTr(data[i].name,data[i].age,data[i].gender));
}
return table;
};
var createTr = function(name,age,gender){
var tr=document.createElement('tr');
var tdName=document.createElement('td');
tdName.innerHTML = name;
var tdAge = document.createElement('td');
tdAge.innerHTML = age;
var tdGender = document.createElement('td');
tdGender.appendChild(document.createTextNode(gender));
tr.appendChild(tdName);
tr.appendChild(tdAge);
tr.appendChild(tdGender);
return tr;
};
</script>
</head>
<body>
</body>
</html>
JavaScript动态创建table表格，这样的场景在实际项目中还是用的比较多的，关于JavaScript动态创建table表格就介绍到这了。