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实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jquery实现提示语淡入效果
May 05 jQuery
jQuery遮罩层实例讲解
May 11 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jQuery实现视频展示效果
May 30 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
详解jQuery的核心函数和事件处理
Feb 18 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
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
在Django中创建第一个静态视图
2015/07/15 Python
python selenium firefox使用详解
2019/02/26 Python
解决Python对齐文本字符串问题
2019/08/28 Python
pandas 空数据处理方法详解
2019/11/02 Python
python序列化与数据持久化实例详解
2019/12/20 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
python 实现单例模式的5种方法
2020/09/23 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
英国最大的百货公司:Harrods
2016/08/18 全球购物
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
《画风》教学反思
2014/04/16 职场文书
食品安全汇报材料
2014/08/18 职场文书
十八大宣传标语
2014/10/09 职场文书
城南旧事读书笔记
2015/06/29 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
python中数组和列表的简单实例
2022/03/25 Python