使用JavaScript根据后台获取的数据进行创建table标签下的tr标签

前端页面中的标签部分代码

 <table class="layui-table lay-even" id="poweruser"><thead><tr><th width="80">ID</th><th>名称</th><th width="180">图标</th><th>状态</th><th>排序</th><th width="240">操作</th></tr></thead><tbody><!--这是根据后台的数据在js中进行创建tr标签--></tbody></table>

使用根据获取的数据进行遍历创建tr标签

$.ajax({type : "post",async : false,//不加直接errorurl : '/SuperCMS/AdminMenuCon/menupower',success : function(res) {data=res;var tdArr = document.getElementById('poweruser').firstElementChild;for (var i = 0; i < data.length; i++) {var tr = document.createElement("tr");                  tr.innerHTML = '<td>' + data[i].id + '</td>'+'<td>' + data[i].cname + '</td>'+'<td><i class="iconfont">' + data[i].iconfont + '</i></td>'+'<td><input type="checkbox" name="field_value" value="1" lay-skin="switch" lay-filter="ajax" lay-text="正常|禁用"  data-params /></td>'+'<td>'+ data[i].sort + '</td>'+'<td><a href="" class="layui-btn layui-btn-mini modal-catch">'+'<i class="iconfont"></i>编辑</a>'+'<a class="layui-btn layui-btn-mini layui-btn-danger ajax" data-list="" data-params="">'+'<i class="iconfont"></i>删除</a>'            +'</td>';                   tdArr.appendChild(tr);           }},error: function () {console.log("超级权限菜单！");}});

具体效果

来源：https://blog.csdn.net/concealed0/article/details/94360472

jQuery表格生成插件Table.js:

http://www.jq22.com/jquery-info10649

js如何动态创建表格（两种方法）

https://www.cnblogs.com/Renyi-Fan/p/9134967.html#_label1

js 动态创建table标签下的tr标签相关推荐

前端小技巧：js 动态创建table标签下的tr标签
使用JavaScript根据后台获取的数据进行创建table标签下的tr标签前端页面中的标签部分代码 <table class="layui-table lay-even" ...
html给自动生成的td赋值,JS 动态创建Table,Tr,Td并赋值的简单示例
修改: 要求主题列表随成果类型改变而改变网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合--动态创建/编辑Table JS部分: 经测试代码如下: /** * 动 ...
html给自动生成的td赋值,JS动态创建Table,Tr,Td并赋值的具体实现
成果库修改: 要求主题列表随成果类型改变而改变网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合--动态创建/编辑Table 概要代码如下: JS //动态获取主题 ...
通过js动态创建标签，并设置属性
当我们在写jsp页面时,往往会遇到这种情况:从后台获取的数据个数不确定,此时在前端写jsp页面时也就不确定怎么设计了.这个时候就需要通过js动态创建标签: 1.创建某个标签:如下在body中创建一个d ...
js动态修改html标签属性,通过js动态创建标签,并设置属性方法
当我们在写jsp页面时,往往会遇到这种情况:从后台获取的数据个数不确定,此时在前端写jsp页面时也就不确定怎么设计了.这个时候就需要通过js动态创建标签: 1.创建某个标签:如下在body中创建一个d ...
js的节点操作动态创建table表格，创建行，删除行
节点操作根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点,每个 HTML 元素是元素节点,HTML 元素内的文本是文本节点,每个 HTML 属性 ...
原生js动态为table追加html,JS动态添加Table的TR，TD实现方法
本文实例讲述了JS动态添加Table的TR,TD实现方法.分享给大家供大家参考.具体实现方法如下: var tempRow=0; var maxRows=0; function insertRows( ...
js动态生产html元素,js 动态创建 html元素
js 动态创建 html元素 js学习之动态创建html元素 body{margin:0;padding:0;} .sky{background:#000;width:1000;height:500p ...
html div 移除,js动态创建及移除div的方法
本文实例讲述了js动态创建及移除div的方法.分享给大家供大家参考.具体实现方法如下: //创建div function createDiv(){ if(document.getElementById ...

js 动态创建table标签下的tr标签

具体效果

jQuery表格生成插件Table.js:

js如何动态创建表格（两种方法）

js 动态创建table标签下的tr标签相关推荐

最新文章

热门文章