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 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
如何编写jquery插件
Mar 29 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
jQuery实现高级检索功能
May 28 jQuery
9种方法优化jQuery代码详解
Feb 04 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迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
js window.event对象详尽解析
2009/02/17 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
2015/08/25 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
jstree的简单实例
2016/12/01 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
在HTML中使用JavaScript的两种方法
2020/12/24 Javascript
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
python中比较两个列表的实例方法
2019/07/04 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
优秀乡村医生事迹材料
2014/05/28 职场文书
劳模事迹材料范文
2014/12/24 职场文书
python小型的音频操作库mp3Play
2022/04/24 Python
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server