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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
jQuery实现带进度条的轮播图
Sep 13 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
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
python的常用模块之collections模块详解
2018/12/06 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
python实现门限回归方式
2020/02/29 Python
python两种注释用法的示例
2020/10/09 Python
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
餐厅采购员岗位职责
2014/03/06 职场文书
社区科普工作方案
2014/06/03 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
党校毕业个人总结
2015/02/28 职场文书
公司捐书倡议书
2015/04/27 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
使用feign服务调用添加Header参数
2021/06/23 Java/Android
Java使用Unsafe类的示例详解
2021/09/25 Java/Android
Win11更新失败并提示0xc1900101
2022/04/19 数码科技
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers