jQuery+ajax实现动态添加表格tr td功能示例


Posted in jQuery onApril 23, 2018

本文实例讲述了jQuery+ajax实现动态添加表格tr td功能。分享给大家供大家参考,具体如下:

功能:ajax获取后台返回数据给table动态添加tr/td

html部分:

<table>
<tbody></tbody>
</table>

ajax部分:

var year = $('#year').val();//下拉框数据
var province= $('#province').val();//下拉框数据
$('table tbody').html('');
$.ajax({
  url:"/Plan/sendJson.html",
  type:"get",
  data:{
     'year':year,
     'province':province
  },
  datatype:'json',
  success:function(data){
     switch(data.msg)
     {
        case '0':
            $('table tbody').prepend('<tr><td colspan='2'>暂无数据</td></tr>');break;
        case '1':
            $.each(data.data,function(i,n){
var $tr = $("<tr>"+
"<td>"+n.year+"</td>"+
"<td>"+n.province+"</td>"+
"</tr>");
var $table = $('table tbody');
$table.append($tr);
});
}
}
})

php后台(thinkPHP处理):

$year = I('get.year');
$province = I('get.province');
$condition = array();
$year && $condition = array('eq',$year);
$province && $condition = array('eq',$province);
$dataList = M('Plan')->where($condition)->select();
if(false != $dataList){
  $data['msg'] = '1';
  $data['data'] = $dataList;
  echo json_encode($data);
  exit;
}else{
  $data['msg'] = '0';
  $data['data'] = '';
  echo json_encode($data);
  exit;
}

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

jQuery 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 #jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 #jQuery
JQuery元素快速查找与操作
Apr 22 #jQuery
关于jquery layui弹出层的使用方法
Apr 21 #jQuery
jQuery中的for循环var与let的区别
Apr 21 #jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 #jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 #jQuery
You might like
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
php数组中删除元素的实现代码
2012/06/22 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
js轮播图代码分享
2016/07/14 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
Python中property函数用法实例分析
2018/06/04 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
python检测IP地址变化并触发事件
2018/12/26 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
python剪切视频与合并视频的实现
2020/03/03 Python
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
介绍一下Ruby的特点
2013/01/20 面试题
事业单位分类改革实施方案
2014/03/21 职场文书
函授生自我鉴定
2014/03/25 职场文书
2014中考励志标语
2014/06/05 职场文书
宣传标语大全
2014/07/01 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
公务员政审材料
2014/12/23 职场文书
自荐信格式范文
2015/03/04 职场文书
休学证明范本
2015/06/19 职场文书