使用jQuery将多条数据插入模态框的实现代码
//Bootstrap模态框(局部)
<div class="modal fade" id="orderDetail">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<table class="table">
<tr>
<td>名 称</td>
<td>原 价</td>
</tr>
</table>
</div>
<div class="modal-footer">
</div>
</div>
</div>
/**
* 查看数据详情
* @黑眼诗人 <www.chenwei.ws>
*/
function orderDetail(order_no)
{
//1.先清空模态框数据
$('#orderDetail').find('tr').first().nextAll().remove();
//2.外部插入
var order_no = order_no;
$.post(base_url + '?d=admin&c=orders&m=ajax_order_detail', {order_no:order_no}, function(data){
//数据的格式如: [{no:123,old:abc},{no:234,old:def},{no:345,old:ghi}]
var obj = eval('(' + data + ')');
$.each(obj, function(i, n){
var tr = $('#orderDetail').find('tr').last();
tr.after("<tr><td>"+ n['organize_name'] + ":" + n['cate_name'] + " -- " + n['course_name'] +"</td><td>"+ n['old_price'] +"</td><td>" + n['sale_price'] + "</td></tr>");
});
});
}
相关推荐
-
js实现类bootstrap模态框动画
在pc端开发,模态框是一个很常用的插件,之前一直用的第三方插件,比如bootstrap,jQuery的模态框插件,最近还用了elementUI的.但是会发现其实动画效果都差不多,那么如何去实现这样一个动画效果呢? 模态框的构成 常见的模态框的结构我们很容易就可以看出,一个遮罩层,还有内容区.内容区主要是头部(包括标题,关闭按钮)和body部分(body中常常会有确认和取消按钮). 布局 1.背景要充满全屏,而且如果页面有滚动,当模态框弹出的时候是无法滚动的: 2.内容区要水平居中显示,至于
-
jQuery实现淡入淡出的模态框
本文实例为大家总结了jQuery淡入淡出模态框的使用方法,供大家参考,具体内容如下 HTML代码如下:固定格式就省略了 <div class="theme-popover"> <div class="theme-poptit"> <a href="#" rel="external nofollow" class="close">×</a> <h3>
-
jQuery将多条数据插入模态框的示例代码
//Bootstrap模态框(局部) <div class="modal fade" id="orderDetail"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> </div> <div class="modal
-
js利用事件的阻止冒泡实现点击空白模态框的隐藏
很多时候,我们做前端的时候都会有这样的小功能,点击弹出某个框框,但是,有时候不想操作,就想点击某个空白处,隐藏该框框.假设如下场景,一个小按钮,点击可以弹出一个模态框. 就这么简单,但是我们想要点击空白部分的时候隐藏模态框,加入按钮id:btn,模态框id:model 也许我们最简单的思路就是直接在document上监听一个事件,伪代码如下: 按钮点击弹出事件监听: 复制代码 代码如下: $("#btn").bind("click",function(e){ if(
-
jQuery点击弹出层弹出模态框点击模态框消失代码分享
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <title>jQuery弹出层 模态框</title> <script src="./jquery.min.js" type="text/javascript"></script> <style> .btn{ height:100px; } .black_o
-
AngularJs 弹出模态框(model)
推荐阅读:详解AngularJS 模态对话框 $modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们. $modal仅有一个方法open(options) templateUrl:模态窗口的地址 template:用于显示html标签 scope:一个作用域为模态的内容使用(事实上,$modal会创建一个当前作用域的子作用域)默认为$rootScope controller:为$modal指定的控制器,初始化$scope,该控制器可用$modalInstance注入 res
-
使用jQuery将多条数据插入模态框的实现代码
复制代码 代码如下: //Bootstrap模态框(局部) <div class="modal fade" id="orderDetail"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> </div> <div class=
-
Spring Boot使用线程池处理上万条数据插入功能
目录 # 前言 # 使用步骤 # 前言 前两天做项目的时候,想提高一下插入表的性能优化,因为是两张表,先插旧的表,紧接着插新的表,一万多条数据就有点慢了 后面就想到了线程池ThreadPoolExecutor,而用的是Spring Boot项目,可以用Spring提供的对ThreadPoolExecutor封装的线程池ThreadPoolTaskExecutor,直接使用注解启用 # 使用步骤 先创建一个线程池的配置,让Spring Boot加载,用来定义如何创建一个ThreadPoolTask
-
jQuery带进度条全屏图片轮播特效代码分享
本文实例讲述了jQuery带进度条全屏图片轮播特效.分享给大家供大家参考.具体如下: jQuery实现的带进度条转接全屏图片轮播效果是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效代码,实现效果大气,简洁大方 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: link rel="sty
-
Bootstrap 模态框(Modal)插件代码解析
Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.下面通过代码给大家介绍bootstrap 模态框插件,先给大家展示下效果图: 页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>my
-
angularjs模态框的使用代码实例
这篇文章主要介绍了angularjs模态框的使用代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 编写html页面 1.触发模态框的点击事件 <div> <button type="button" class="btn btn-primary" ng-click="openAddModal()" data-toggle="modal" data-tar
-
bootstrap实现嵌套模态框的实例代码
项目上有一个需求,需要在已经弹出的一个bootstrap模态框的基础上再弹一个模态框. 因为bootstrap官方不建议这么做,最后实现的过程属实不易. 以下是解决方案: html代码: <div id="container"> <a data-toggle="modal" href="#myModal" rel="external nofollow" class="btn btn-primary&
-
原生JavaScript实现模态框的示例代码
目录 原生js封装模态框 示例效果 代码 原生js封装模态框 最近需要一个模态框,然后一种是提示类的,一种是确认类型,我就想着再网上找一个然后修改一下,结果找到了,但是不深特别合适,我再次基础上在做了修改,对功能有所增强,纯原生写的,没有任何依赖性,适应性比较强,值copy即可使用. 配置:可以在实例化时对options进行参数设置,达到自己想要的效果 示例效果 代码 HTML部分 <head> <meta charset="utf-8"> <title&
-
bootstrap模态框远程示例代码分享
本文实例为大家分享了bootstrap模态框远程的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
-
angularJS模态框$modal实例代码
1.引入$modal模块 如:angular.module('ModalCtrl',['$modal' ,'$scope' , function($modal ,$scope ){ }]); 2.执行调模态框 函数 $scope.editModule = function(type, size, id) { $scope.id = id; var modalInstance = $modal.open({ templateUrl: 'tpl/weichat_modulebaseinfo.html
随机推荐
- flash遮住div问题的正确解决方法
- 在Python的Django框架中更新数据库数据的方法
- Java爬虫抓取视频网站下载链接
- iOS runtime知识梳理
- javascript appendChild,innerHTML,join性能比较代码
- Javascript实现跨域后台设置拦截的方法详解
- 详解Python的Django框架中的templates设置
- c语言:基于函数指针的两个示例分析
- python2.7 mayavi 安装图文教程(推荐)
- 动态语言、动态类型语言、静态类型语言、强类型语言、弱类型语言介绍
- ASP动态生成的javascript表单验证代码
- JSP自定义标签入门学习
- ruby线程实现生产者消费者问题示例(队列Queue实现线程同步)
- 基于Python对象引用、可变性和垃圾回收详解
- 分页存储过程(用存储过程实现数据库的分页代码)
- JavaScript获取当前url根目录(路径)
- jQuery.trim() 函数及trim()用法详解
- java实现系统捕获异常发送邮件案例
- 详解Python中的__new__()方法的使用
- Java中的hashcode方法介绍