jQuery动态创建表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态创建表格</title>
<script src="jquery-1.11.1.js"></script>
<style>
table {
border-collapse: collapse;
border-spacing: 0;/*单元格和表格边框合并*/
border: 1px solid #c0c0c0;
} th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
} th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
} td {
font: 14px "微软雅黑";
} tbody tr {
background-color: #f0f0f0;
} tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
<script>
var data=[{
name:"传智播客",
url:"www.baidu.com",
type:"百度搜索引擎"
},{
name:"黑马程序员",
url:"www.baidu.com",
type:"百度搜索引擎"
},{
name:"传智前端学院",
url:"www.baidu.com",
type:"百度搜索引擎"
}];
$(function(){
//第一种方法
/* var str="";
//将数组动态创建到tbody中去
for( var i=0;i<data.length;i++){
var temp=data[i];
str+="<tr>";
str+= "<td>" + temp.name + "</td>";
str+= "<td>" + temp.url + "</td>";
str+= "<td>" + temp.type + "</td>";
str+="</tr>"; }
//把拼接好的html放到tbody中去
$("#tb").html(str);*/ //第二种方法
$("#tb").empty();//清空所有子节点
for(var i=0;i<data.length;i++){
var temp=$("<tr></tr>");//动态创建tr标签
temp.append("<td>"+data[i].name+"</td>");//给每行添加单元格
temp.append("<td>"+data[i].url+"</td>");
temp.append("<td>"+data[i].type+"</td>");
$("#tb").append(temp);
}
})
</script> </head>
<body>
<table>
<thead id="th">
<tr>
<th>标题</th>
<th>地址</th>
<th>说明</th>
</tr>
</thead>
<tbody id="tb"></tbody>
</table>
</body>
</html> 运行效果：