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 ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
Jquery让form表单异步提交代码实现
Nov 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
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
python print出共轭复数的方法详解
2019/06/25 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
一些Unix笔试题和面试题
2013/01/22 面试题
小区推广策划方案
2014/06/06 职场文书
音乐节策划方案
2014/06/09 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
525心理健康活动总结
2015/05/08 职场文书
十月围城观后感
2015/06/08 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
大学生暑期实践报告
2015/07/13 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL