需求:用jQuery动态生成一个表格
说明:jQuery版本为:jquery-1.11.3.js
步骤如下:
1.先创建一个表头:
</tbody>
</table>
# | FirstName | LastName | UserName |
---|
2.样式如下:
table{
width: 400px;
margin-left: 20px;
border-collapse: collapse;
}
table>thead>tr {
border-bottom: 5px solid black !important;
}
3.生成表格
// 模拟表格数据
var datas = [
{"FirstName": "liang", "LastName": "cheng", "UserName": "@const"},
{"FirstName": "ran", "LastName": "li", "UserName": "@ran"},
{"FirstName": "dong", "LastName": "zhang", "UserName": "@dong"},
{"FirstName": "yan", "LastName": "yang", "UserName": "@meimei"}
];
(function() {
// 查找需要绑定时间的元素
var tbody = $(".tbody");
// 设置表格文本内容居中
tbody.css("text-align","center");
var uid = 0;
// 循环遍历,将数据动态插入tbody中
for(var data of datas) {
var FirstName = data["FirstName"];
var LastName = data["LastName"];
var UserName = data["UserName"];
++uid;
// 将每行数据挂载在dom树tbody节点下
var tr = tbody.append(`<tr>
<td>${uid}</td>
<td>${FirstName}</td>
<td>${LastName}</td>
<td>${UserName}</td>
</tr`);
//设置表格偶数行变色
$("tr:even:not(:first)").css("background","#00bcd4");
// 设置下边框样式
$("tr:not(:last)").css("border-bottom","2px solid black");
}
})()
4.最后生成表格效果如下图:
5.总结:
因为使用不是很熟练,未设计好样式的结构,故在使用jQuery的过程中,没有合理的使用好每个jQuery函数返回的可继续使用的jQuery对象。导致多创建了一些jQuery对象。
6.转载请注明出处。