用jQuery写一个表格

用jQuery写一个表格

需求：用jQuery动态生成一个表格

说明：jQuery版本为：jquery-1.11.3.js
步骤如下：
1.先创建一个表头：

    </tbody>
</table>

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.转载请注明出处。