当前行的td值传入模态框
<!-- 让include引用的页面,因为故障列表和周、月故障列表里面的table和分页是一样的前端页面,只有一点不同,没必要每个页面都写这些 -->
<table id="table" class="table table-bordered table-striped text-center">
<thead class="success">
<tr class="success">
<th hidden="hidden" class="text-center">故障ID</th>
<th class="text-center">主机名</th>
<th class="text-center">IP地址</th>
<th class="text-center" width="6%">报修人员</th>
<th class="text-center">报修时间</th>
<th width="22%" class="text-center">具体问题</th>
<th width="22%" class="text-center">解决办法</th>
<th class="text-center">故障状态</th>
<th class="text-center">处理人</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody id="history_income_list" class="table-hover">
{% for obj in hostnames %}
<tr>
<td hidden="hidden">{{ obj.id }}</td>
<td id="{{ obj.id }}">{{ obj.Hostname }}</td>
<td>{{ obj.IPaddress }}</td>
<td>{{ obj.ProblemUser }}</td>
<td>{{ obj.ProblemTime }}</td>
<td>
<div style="height:60px;overflow-y:scroll;">
{{ obj.Issue }}
</div>
</td>
<td>
<div style="height:60px;overflow-y:scroll;">
{{ obj.Resolve }}
</div>
</td>
<td>{{ obj.get_ProblemStatus_display }}</td>
<td>{{ obj.ResolveUser }}</td>
<td id="{{ obj.id }}" class="model-button">
<button class="btn btn-primary edit-model" data-toggle="modal" data-target="#edit" id="model-button">编辑
</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<!--分页-->
<div class="pagination pagination-centered">
<div class="pull-right"><span class="label">{{hostnames}}</span></div>
<ul>{% if not hostnames.has_previous %}
<li class="active"><a>前一页</a></li>
{% endif %}
{% if hostnames.has_previous %}
<li><a href="?page={{ hostnames.previous_page_number }}">前一页</a></li>
{% endif %}
{% if not hostnames.has_next %}
<li class="active"><a>后一页</a></li>
{% endif %}
{% if hostnames.has_next %}
<li><a href="?page={{ hostnames.next_page_number }}">后一页</a></li>
{% endif %}
</ul>
</div>
<!-- 让include引用的页面,因为故障列表和周、月故障列表是一样的前端页面,只有一点不同,没必要每个页面都写一个 -->
{#style="display: none;" 未加这个样式的时候这个模态框总是遮挡住正常该显示的页面,按钮无法按,F12可以看见模态框的阴影。加上后就不显示了#}
<div style="display: none;" class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
编辑
</h4>
</div>
<div class="modal-body">
<h3>编辑故障</h3>
<form id="register-form" method="POST" action="{% url 'edit' %}" class="form-horizontal"> {% csrf_token %}
<div hidden="hidden" class="control-group">
<div class="input-group">
<span class="input-group-addon control-label" for="id">故障id:</span>
<input type="text" class="form-control" style="width: 39%" id="inputid" name="id">
</div>
</div> <div class="control-group">
<div class="input-group">
<span class="input-group-addon control-label" for="host_name">主机名:</span>
<input type="text" class="form-control" style="width: 39%" id="inputhostname" name="hostname" placeholder="主机名">
</div>
</div>
<div style="padding: 11px 0px" class="control-group">
<div class="input-group">
<span for="ip_address" class="control-label input-group-addon">IP地址:</span>
<input type="text" class="form-control" style="width: 37%" id="inputipaddress" name="ipaddress" placeholder="192.168.1.1">
</div> </div>
<div class="control-group">
<div class="input-group">
<span class="input-group-addon control-label" for="problem_user">报修人员:</span>
<input type="text" class="form-control" style="width: 40%" id="inputproblemuser" name="problem_user" placeholder="李红星">
</div> </div>
<div style="padding: 11px 0px" class="control-group">
<div class="input-group">
<span class="input-group-addon control-label" for="problem_time">报修时间:</span>
<input name="problem_time" type="datetime-local" id="inputproblemtime" >
{# <input type="text" class="form-control" style="width: 36.5%" id="inputproblemtime" name="problem_time" placeholder="2018/01/26">#}
</div> </div>
<div class="control-group">
<div class="input-group">
<span class="input-group-addon control-label" for="issue">具体问题:</span>
<textarea type="text" class="form-control" style="width: 36%" id="inputissue" name="issue" placeholder="电脑蓝屏"></textarea>
</div> </div> <div style="padding: 11px 0px" class="control-group">
<div class="input-group">
<span class="input-group-addon control-label" for="resolve">解决办法:</span>
<textarea type="text" class="form-control" style="width: 38%" id="inputresolve" name="resolve" placeholder="软件冲突卸载软件"></textarea>
</div>
</div> <div class="control-group">
<div class="input-group">
<span class="input-group-addon control-label" for="status">是否解决:</span>
<select name="status">
<option value="yes">已解决</option>
<option value="no">未解决</option>
<option value="wait">待观察</option>
</select>
</div>
</div> <div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-info" >Save</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
/**
* Created by Administrator on 2018/1/31.
*/
$(document).ready(function() {
$(".model-button").click(function() {
var value = $(this).parent().children(); $('#inputid').val(value.eq(0).text());
$('#inputhostname').val(value.eq(1).text());
$('#inputipaddress').val(value.eq(2).text());
$('#inputproblemuser').val(value.eq(3).text());
$('#inputproblemtime').val(value.eq(4).text());
$('#inputissue').val(value.eq(5).text().trim());
$('#inputresolve').val(value.eq(6).text().trim()); //for (var i=0;i<8;i++){
// var last_value1 = "td" +i + ":"
// var last_value = value.eq(i).text()
// console.log(last_value)
//}
//var last_value123 = value.eq(0).text()
//console.log(last_value123)
})
});
当前行的td值传入模态框的更多相关文章
- Bootstrap使用模态框modal实现表单提交弹出框
Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...
- angularjs 简易模态框
angularjs 简易模态框 angularjs 中的模态框一般使用插件angular-ui-bootstrap书写. 这里记录一种简易的模态框写法: 1.警告消息框alert: 原理: 在html ...
- 拥Bootstrap入怀——模态框(modal)篇
置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<CSS绘制Android Robot> 作者主页:myvin 博主QQ:851399101(点击QQ和 ...
- Boostrap模态框,以及通过jquery绑定td的值,使模态框回显
做页面不管是登录或是修改信息,难免会使用到模态框,在此分享一个比较漂亮的模态框 Boostrap模态框 使用之前首先导入jquery-3.2.1.min.js,和bootstrap.min.js 先添 ...
- bootstrap中模态框如果放入form表单中会存在的问题
bootstrap中模态框如果放入form表单中会存在的问题:当模态框显示时,点回车会出现表单自动提交!!!所以在使用模态框的时候要特别注意!
- 从头开始一步一步实现EF6+Autofac+MVC5+Bootstarp极简前后台ajax表格展示及分页(二)前端修改、添加表格行点击弹出模态框
在前一篇中,由于不懂jquery,前端做的太差了,今天做稍做修改,增加一个跳转到指定页面功能,表格行点击样式变化.并且在表格中加入bootstarp的按钮组,按钮点击后弹出模态框,须修改common, ...
- jQuery练习:表单模态框
代码:基于事件冒泡原理和事件委托 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta cha ...
- 用jQuery写了一个模态框插件
用jQuery写了一个模态框插件 大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").con ...
- bootstrap表格添加按钮、模态框实现
bootstrap表格添加按钮.模态框实现 原创 2017年07月20日 17:35:48 标签: bootstrap 1723 bootstrap表格添加按钮.模态框实现 - 需求: 需要表格后面每 ...
随机推荐
- “土法炮制”之 OOM框架
一.什么是OOM框架? OOM 的全拼是 Object-Object-Map,意思是对象与对象之间的映射,OOM框架要解决的问题就是对象与对象之间数据的自动映射. 举一个具体的例子:用过MVC模式开发 ...
- 【PCIE-4】---PCIE中部分概念或问题总结(很基础很重要)
前面三小节,介绍了PCIE的基本知识和概念,以及扫描流程.在不求甚解的情况下,我想各位小伙伴应该对PCIE有了个宏观的认识,OK,那么本章我们在之前的基础上,再单独把一些概念和更深层次的问题摘出来具体 ...
- 由Kaggle竞赛wiki文章流量预测引发的pandas内存优化过程分享
pandas内存优化分享 缘由 最近在做Kaggle上的wiki文章流量预测项目,这里由于个人电脑配置问题,我一直都是用的Kaggle的kernel,但是我们知道kernel的内存限制是16G,如下: ...
- 异数OS 织梦师-云(五)-- 容器服务化,绿色拯救未来。
. 异数OS 织梦师-云(五)– 容器服务化,绿色拯救未来. 本文来自异数OS社区 github: https://github.com/yds086/HereticOS 异数OS社区QQ群: 652 ...
- 关于github显示不出来图片的问题
今天打开github,突然发现图标图片等都显示不出来了. 控制台看了一下 百度查找了Failed to load resource: net::ERR_CERT_COMMON_NAME_INVALID ...
- 【转载】Notepad++源码分析
在网上发现了一个哥们写了关于Notepad++源码的文章,不过就写了一就没有了,我就接着他的工作再说说吧! 大三了,也写了一点儿程序了,但是如果只是按照自己的思路写下去恐怕难以提高,于是准备开始阅读一 ...
- python算法学习总结
数据结构一维: 基础:数组array(string),链表Linked List 高级:栈stack,队列queue,双端队列deque,集合set,映射map(hash or map), etc二维 ...
- Tensorflow下指定显卡占用比例参数配置
tensorflow在训练时默认占用所有GPU的显存. 可以通过以下方式解决该问题: 1.在构造tf.Session()时候通过传递tf.GPUOptions作为可选配置参数的一部分来显式地指定需要分 ...
- 《即时消息技术剖析与实战》学习笔记8——IM系统如何保证长连接的可用性:心跳机制
假设有以下突发意外情况: 用户进入信号不好的地方,手机没有网络信号了 上网的路由器突然掉线了 这个时候,比如微信发消息,消息就会转圈圈,甚至变成红色叹号-- 上面情况都会导致"长连接&quo ...
- 基于云开发开发 Web 应用(一):项目介绍 & 初始化
基于云开发开发 Web 应用(一):项目介绍 & 初始化 背景描述 Linux 中国曾在过去的 1 - 2 年内长期运行了一个 TL;DR 的中国版.不过当时做的版本是小程序的版本,一直以来, ...