jQuery+ajax实现动态添加表格tr td功能示例

 更新时间:2018年04月23日 14:32:11   作者:jqdfTiTan  
这篇文章主要介绍了jQuery+ajax实现动态添加表格tr td功能,结合实例形式分析了jQuery基于ajax动态创建页面table元素相关操作技巧,需要的朋友可以参考下

本文实例讲述了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表格(table)操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结

希望本文所述对大家jQuery程序设计有所帮助。

相关文章

  • jquery 插件学习(三)

    jquery 插件学习(三)

    用惯jquery的用户可能习惯于连写行为,也就是说在调用一个方法之后,紧跟着调用另一个方法,如此连写不断,形成一个珍珠链,而且编写灵活,方便
    2012-08-08
  • jquery+easeing实现仿flash的载入动画

    jquery+easeing实现仿flash的载入动画

    本文主要给大家讲述的是如何使用jquery+easeing实现仿flash的载入动画的方法,附上示例代码,非常细致全面,这里推荐给大家,希望对大家熟练使用jQuery有所帮助。
    2015-03-03
  • 动态加载jQuery的方法

    动态加载jQuery的方法

    这篇文章主要介绍了动态加载jQuery的方法,可实现判定后加载jQuery的功能,需要的朋友可以参考下
    2015-06-06
  • jquery mobile页面跳转后样式丢失js失效的解决方法

    jquery mobile页面跳转后样式丢失js失效的解决方法

    用ajax跳转的时候,目标页的css以及js都失效,这是由于page之外的代码都不会加载,所以导致在page外的js和css都失效,解决方法如下
    2014-09-09
  • jQuery焦点图轮播特效代码分享(3款)

    jQuery焦点图轮播特效代码分享(3款)

    这篇文章主要介绍了jQuery焦点图轮播特效,jQuery cxSlide实现的三款多功能大气焦点图轮播特效源码,是一段拥有三种不同风格和效果的焦点图轮播代码,还可以使用鼠标的滚轮控制图片的缩放,推荐给大家,有需要的小伙伴可以参考下。
    2015-09-09
  • 浅谈jQuery中的checkbox问题

    浅谈jQuery中的checkbox问题

    下面小编就为大家带来一篇浅谈jQuery中的checkbox问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 基于jquery打造的百分比动态色彩条插件

    基于jquery打造的百分比动态色彩条插件

    主要是为了往后的项目中方便实现这类型的功能,在之前做问卷调查那个应用中,就用到这个来显示结果,但当时开发时并不用是插件的,一大堆代码,看也烦,用起来很麻烦
    2012-09-09
  • 详谈jQuery中的一些正则匹配表达式

    详谈jQuery中的一些正则匹配表达式

    下面小编就为大家带来一篇详谈jQuery中的一些正则匹配表达式。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • Jquery操作radio的简单实例

    Jquery操作radio的简单实例

    本篇文章主要介绍了Jquery操作radio的简单实例。需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 基于jQuery的投票系统显示结果插件

    基于jQuery的投票系统显示结果插件

    投票系统是网站中十分常见的系统,显示结果也是十分常见的。最近因为项目需要开发了一个投票结果显示jQuery插件。
    2011-08-08

最新评论