首页 >> 大全

用jQuery写一个表格

2023-12-28 大全 33 作者:考证青年

需求:用动态生成一个表格

说明:版本为:-1.11.3.js

步骤如下:

1.先创建一个表头:

    
table>

#rName

用jQuery写一个表格__用jQuery写一个表格

2.样式如下:

table{

width: 400px;

-left: 20px;

-: ;

table>thead>tr {

_用jQuery写一个表格_用jQuery写一个表格

-: 5px solid black !;

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(`${uid}${FirstName}${LastName}${UserName}

4.最后生成表格效果如下图:

5.总结:

因为使用不是很熟练,未设计好样式的结构,故在使用的过程中,没有合理的使用好每个函数返回的可继续使用的对象。导致多创建了一些对象。

tags: table

关于我们

最火推荐

小编推荐

联系我们


版权声明:本站内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 88@qq.com 举报,一经查实,本站将立刻删除。备案号:桂ICP备2021009421号
Powered By Z-BlogPHP.
复制成功
微信号:
我知道了