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实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 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
PHP 存储文本换行实现方法
2010/01/05 PHP
php强制下载类型的实现代码
2011/04/21 PHP
php 函数中使用static的说明
2012/06/01 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
JScript的条件编译
2007/05/29 Javascript
无阻塞加载脚本分析[全]
2011/01/20 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
python交互式图形编程实例(二)
2017/11/17 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
Python3实现定时任务的四种方式
2019/06/03 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
如何理解python面向对象编程
2020/06/01 Python
Python解析微信dat文件的方法
2020/11/30 Python
北体毕业生求职信
2014/02/28 职场文书
公司接待方案
2014/03/08 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
车贷收入证明范本
2014/09/14 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
MySQL数据库事务的四大特性
2022/04/20 MySQL