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仿微信聊天界面
May 06 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 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
咖啡常见的种类
2021/03/03 新手入门
PHP文件上传原理简单分析
2011/05/29 PHP
php 数组元素快速去重
2017/05/05 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
jQuery的框架介绍
2016/05/11 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
webpack之devtool详解
2018/02/10 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
React 实现拖拽功能的示例代码
2019/01/06 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
python中redis的安装和使用
2016/12/04 Python
python实现八大排序算法(1)
2017/09/14 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
原装进口全世界:天猫国际
2016/08/03 全球购物
儿科护理实习自我鉴定
2013/09/19 职场文书
师范毕业生求职自荐信
2013/09/25 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
文言文辞职信
2015/02/28 职场文书
风之谷观后感
2015/06/11 职场文书
浅谈Python数学建模之线性规划
2021/06/23 Python
Python Flask实现进度条
2022/05/11 Python
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS