zoukankan      html  css  js  c++  java
  • 当前行的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=" 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=" 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=" 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=" 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=" 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=" 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=" 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)
      })
    });
    

      

  • 相关阅读:
    linux hosts.equiv设置解析
    linux 普通synflood攻击防范网络参数设置
    电脑如何刻录光盘的方式
    Linux系统服务详解
    linux下history命令显示历史指令记录的使用方法
    tkinter模块常用参数
    python使用tkinter做界面之颜色
    python进行linux系统监控
    Windows 系统cmd设置添加静态路由方式
    PyCharm在win10的64位系统安装实例
  • 原文地址:https://www.cnblogs.com/dribs/p/8393799.html
Copyright © 2011-2022 走看看