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 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
如何在vue 中引入使用jquery
Nov 10 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出错界面
2006/10/09 PHP
优化使用mysql存储session的php代码
2008/01/10 PHP
php获取参数的几种方法总结
2014/02/18 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
javascript String 对象
2008/04/25 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
Python深入学习之闭包
2014/08/31 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
python代码能做成软件吗
2020/07/24 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
简短大学毕业感言
2014/01/18 职场文书
和解协议书
2014/04/16 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
整改报告怎么写
2014/11/06 职场文书
支行行长竞聘报告
2014/11/06 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
慰问信范文
2015/02/14 职场文书
python 对图片进行简单的处理
2021/06/23 Python
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android