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.form.js异步提交表单详解
Apr 25 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 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 php 框架学习笔记
2009/10/30 PHP
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
javascript web对话框与弹出窗口
2009/02/22 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
Python实现注册、登录小程序功能
2018/09/21 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
通用求职信范文模板分享
2013/12/27 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
安全先进个人材料
2014/12/29 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
辩论赛新闻稿
2015/07/17 职场文书
用python画城市轮播地图
2021/05/28 Python