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树插件zTree使用方法详解
May 02 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jQuery实现手风琴特效
Jan 11 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中的一个中文字符串截取函数
2007/02/14 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
浅谈python多线程和队列管理shell程序
2015/08/04 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
Python iter()函数用法实例分析
2018/03/17 Python
python实现泊松图像融合
2018/07/26 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
python中remove函数的踩坑记录
2021/01/04 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
小学后勤管理制度
2014/01/14 职场文书
创先争优承诺书范文
2014/03/31 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
赔偿协议书
2015/01/27 职场文书
python实现A*寻路算法
2021/06/13 Python
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python