<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
margin: 100px 0 0 300px;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th,td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
color: #fff;
background: #09c;
font: bold 16px "微软雅黑";
}
td {
font: bold 14px "微软雅黑";
}
</style>
</head>
<body>
<input type="button" value="获取数据" id="btnGetData">
<div>
<table>
<thead>
<tr>
<th>姓名</th>
<th>专业</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
<script src="jquery-1.12.1.min.js"></script>
<script type="text/javascript">
$(function() {
// 模拟数据
var data = [{
"name":"张杰",
"job":"sing"
},{
"name":"郭富城",
"job":"舞蹈"
}];
$('#btnGetData').click(function(){
var html = '';
for(var i = 0;i<data.length;i++){
html+='<tr><td>'+data[i].name+'</td><td>'+data[i].job+'</td></tr>'
}
console.log(html);
// $('tbody').append(html)
$('tbody').html(html);
})
});
</script>
</script>
</html>
如图
image.png
网友评论