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 相关文章推荐
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
jquery实现拖拽小方块效果
Dec 10 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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
一个简单的域名注册情况查询程序
2006/10/09 PHP
PHP中的日期处理方法集锦
2007/01/02 PHP
wordpress之wp-settings.php
2007/08/17 PHP
php简单静态页生成过程
2008/03/27 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
php生成curl命令行的方法
2015/12/14 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
微信小程序转发事件实现解析
2019/10/22 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
python实现批量监控网站
2016/09/09 Python
Python3学习笔记之列表方法示例详解
2017/10/06 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
python实现画循环圆
2019/11/23 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
北京天润融通.net面试题笔试题
2012/02/20 面试题
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
材料物理专业个人求职信
2013/12/15 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python