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用noConflict代替$的实现方法
Apr 12 jQuery
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
jquery实现简单每周轮换的日历
Sep 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 GD 图像处理组件的常用函数总结
2010/04/28 PHP
linux下安装php的memcached客户端
2014/08/03 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
解javascript 混淆加密收藏
2009/01/16 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
pygame学习笔记(5):游戏精灵
2015/04/15 Python
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
pygame实现简易飞机大战
2018/09/11 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
python实现加密的方式总结
2020/01/19 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
优秀导游先进事迹材料
2014/01/25 职场文书
煤矿安全生产标语
2014/06/06 职场文书
2014年医务科工作总结
2014/12/18 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript