jQuery ajax动态生成table功能示例


Posted in jQuery onJune 14, 2017

本文实例讲述了jQuery ajax动态生成table的方法。分享给大家供大家参考,具体如下:

$(function(){
 ajaxT();
});
function ajaxT(){
 $.ajax({
   type:"POST",
   dataType: "json",
   url:"<%=basePath%>UserInfoServlet",
   data:"doaction=userList",
   success:function(data){
   createShowingTable(data);
}
}
);
}
//动态的创建一个table
function createShowingTable(data) {
 var tableStr = "<table class='tab-list' width='99%'>";
 tableStr = tableStr
   + "<tr class='list-header'>"
   +"<td width='5%'>序号</td>"
   +"<td width='5%'><input id='checkAll' name='checkAll' type='checkbox' /></td>"
   +"<td width='30%'>用户姓名</td>"
   +"<td width='20%'>工号</td>"
   +"<td width='20%'>职位</td>"
   +"<td width='20%'>创建时间</td>"
   +"</tr>";
 var len = data.length;
 for ( var i = 0; i < len; i++) {
  tableStr = tableStr + "<tr>"
    +"<td>"+ (i+1) + "</td>"
    +"<td><input class='check' id='checkOne' name='checkOne' type='checkbox' value='"+data[i].key+"' /></td>"
    +"<td>"+ data[i].realName + "</td>"
    + "<td>"+ data[i].userNo + "</td>"
    + "<td>"+ data[i].position + "</td>"
    +"<td>"+data[i].regTime+"</td>"
    +"</tr>";
 }
 if(len==0){
  tableStr = tableStr + "<tr style='text-align: center'>"
  +"<td colspan='6'><font color='#cd0a0a'>"+ 暂无记录 + "</font></td>"
  +"</tr>";
 }
 tableStr = tableStr + "</table>";
 //添加到div中
 $("#tableAjax").html(tableStr);
}

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
html中两种获取标签内的值的方法
Jun 16 jQuery
jQuery.form.js的使用详解
Jun 14 #jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 #jQuery
jquery+css实现侧边导航栏效果
Jun 12 #jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 #jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 #jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 #jQuery
jquery与js实现全选功能的区别
Jun 11 #jQuery
You might like
VOLVO车载收音机
2021/03/02 无线电
example2.php
2006/10/09 PHP
一些关于PHP的知识
2006/11/17 PHP
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
php给数组赋值的实例方法
2019/09/26 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
js控制frameSet示例
2013/09/10 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
python实现电脑自动关机
2018/06/20 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
自我推荐书
2013/12/04 职场文书
致跳高运动员广播稿
2014/01/13 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
golang中的空slice案例
2021/04/27 Golang
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
Python办公自动化之Excel(中)
2021/05/24 Python
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技