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实现的动态进度条功能示例
May 25 jQuery
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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(1)
2006/10/09 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
彻底理解Python list切片原理
2017/10/27 Python
windows下python安装小白入门教程
2018/09/18 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
python中adb有什么功能
2020/06/07 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
英语专业毕业生自荐信
2013/10/28 职场文书
教师实习自我鉴定
2013/12/13 职场文书
委托公证书
2014/04/08 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
基层党支部承诺书
2015/04/30 职场文书
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL