jQuery+ajax动态操作表格tr td步骤详解

这次给大家带来jQuery+ajax动态操作表格tr td步骤详解,jQuery+ajax动态操作表格tr td的注意事项有哪些,下面就是实战案例,一起来看一下。

功能:ajax获取后台返回数据给table动态添加tr/td

html部分:

登录后复制

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('暂无数据');break;        case '1':            $.each(data.data,function(i,n){var $tr = $(""+""+n.year+""+""+n.province+""+"");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;}

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

vue-cli2.9.3使用步骤详解

vue webpack使用案例详解

以上就是jQuery+ajax动态操作表格tr td步骤详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2767231.html

(0)
上一篇 2025年3月8日 11:33:14
下一篇 2025年3月5日 12:12:10

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • swiper操作图片步骤详解

    这次给大家带来swiper操作图片步骤详解,swiper操作图片的注意事项有哪些,下面就是实战案例,一起来看一下。 1.结构 //bindload是绑定图片加载的事件,记得给image加上mode=“widthFix”这个属性哦,还有就是设…

    编程技术 2025年3月8日
    200
  • JS进行前后端同构步骤详解

    这次给大家带来JS进行前后端同构步骤详解,JS进行前后端同构的注意事项有哪些,下面就是实战案例,一起来看一下。 什么是前后端同构 明确三个概念:「后端渲染」指传统的 ASP、Java 或 PHP 的渲染机制;「前端渲染」指使用 JS 来渲染…

    编程技术 2025年3月8日
    200
  • Angular+Font-Awesome步骤详解

    这次给大家带来Angular+Font-Awesome步骤详解,使用Angular+Font-Awesome的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 本文主要给大家介绍了关于以Angular的姿势打开Font-Awesome…

    编程技术 2025年3月8日
    200
  • vue移动端实现下拉刷新步骤详解

    这次给大家带来vue移动端实现下拉刷新步骤详解,vue移动端实现下拉刷新的注意事项有哪些,下面就是实战案例,一起来看一下。 看完这篇文章,相信大伙也一样可以,做出一个自己的刷新,加载的组件 说这个功能之前,大家要先了解一下,要怎么触发滚动条…

    2025年3月8日
    100
  • 源生js实现哈夫曼编码步骤详解

    这次给大家带来源生js实现哈夫曼编码步骤详解,源生js实现哈夫曼编码的注意事项有哪些,下面就是实战案例,一起来看一下。 原始版 function cal(str) { if (typeof str !== ‘string’ || str.l…

    编程技术 2025年3月8日
    200
  • Angular CLI创建Angular项目步骤详解

    这次给大家带来Angular CLI创建Angular项目步骤详解,Angular CLI创建Angular项目的注意事项有哪些,下面就是实战案例,一起来看一下。 开始项目前,你需要先安装node和npm,然后执行npm install -…

    编程技术 2025年3月8日
    200
  • vue-cli项目中使用bootstrap步骤详解

    这次给大家带来vue-cli项目中使用bootstrap步骤详解,vue-cli项目中使用bootstrap的注意事项有哪些,下面就是实战案例,一起来看一下。 【相关视频推荐:bootstrap教程】 安装插件 npm install jq…

    编程技术 2025年3月8日
    200
  • 实现vue多页面开发与打包步骤详解

    这次给大家带来实现vue多页面开发与打包步骤详解,实现vue多页面开发与打包的注意事项有哪些,下面就是实战案例,一起来看一下。 前段时间做项目,技术栈是vue+webpack,主要就是官网首页加后台管理系统 根据当时情况,分析出三种方案 一…

    2025年3月8日 编程技术
    200
  • Vue实现proxy代理步骤详解

    这次给大家带来Vue实现proxy代理步骤详解,Vue实现proxy代理的注意事项有哪些,下面就是实战案例,一起来看一下。 Vue 框架开发的时候,会遇到跨域的问题,可在config/index.js 里配置proxyTable内容,使用p…

    编程技术 2025年3月8日
    200
  • vue父组件往父组件内传递值步骤详解

    这次给大家带来vue父组件往父组件内传递值步骤详解,vue父组件往父组件内传递值的注意事项有哪些,下面就是实战案例,一起来看一下。 如下图所示: 当没有任何操作的时候父组件的值是 0 当点击加号以后父组件的值是 1 当点击减号以后父组件的值…

    2025年3月8日
    200

发表回复

登录后才能评论