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 相关文章推荐
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 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实现jQuery扩展函数
2009/10/30 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
angular动态表单制作
2018/02/23 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
python根据出生日期获得年龄的方法
2015/03/31 Python
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
python集合用法实例分析
2015/05/30 Python
Python 的描述符 descriptor详解
2016/02/27 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
基于opencv实现简单画板功能
2020/08/02 Python
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
巴西宠物商店:Cobasi
2019/04/19 全球购物
客户代表实习人员自我鉴定
2013/09/27 职场文书
工地安全检查制度
2014/02/04 职场文书
岗位说明书怎么写
2014/07/30 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
公司介绍信范文
2015/01/31 职场文书