zoukankan      html  css  js  c++  java
  • 前端页面添加判断语句+定时刷新+伸缩页面

    html页<!--[if IE]>...<![endif]-->使用解说

    1、以下判断条件,当disk.capacity大于100的时候,显示MB,否则显示TB;

    <td>{{ disk.capacity|default:'N/A' }}{% if disk.capacity >= 100 %}MB{%else%}TB{%endif%}</td>

    2、前端本页面定时刷新:

    (1)前端页面5秒一刷新:

    <meta http-equiv="refresh" content="5">

    (2)前端页面5秒之后跳到百度页面:

    <meta http-equiv="refresh" content="5"; url="www.baiducom">

    3、前端页面加伸缩功能:

    <div id="openRow"><b>其他信息:</b></div>
    <table id="other" border="1" class="table table-responsive" style="border-left:3px solid deepskyblue;border-bottom:1px solid deepskyblue">
    <thead>
    <tr>
    <th>合同</th>
    <th>价格</th>
    <th>购买日期</th>
    <th>过保日期</th>
    <th>管理员</th>
    <th>批准人</th>
    <th>备注</th>
    <th>批准日期</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>{{ asset.contract.name|default:'N/A' }}</td>
    <td>{{ asset.price|default:'N/A' }}</td>
    <td>{{ asset.purchase_day|default:'N/A' }}</td>
    <td>{{ asset.expire_day|default:'N/A' }}</td>
    <td>{{ asset.admin|default:'N/A' }}</td>
    <td>{{ asset.approved_by|default:'N/A' }}</td>
    <td>{{ asset.memo|default:'N/A' }}</td>
    <td>{{ asset.c_time|default:'N/A' }}</td>
    </tr>
    </tbody>
    </table>
    </div>
    <script>
    window.onload=function(){
    var other=function(e,type){ //没有var声明在ie上会报错
    if(!type){
    e.style.display="none";//隐藏指定的行元素
    }
    else {
    e.style.display="table-row"; //table-row设置此元素会作为一个表格行显示
    }
    }
    var _other=document.getElementById("other"),statu=true;
    // _other.style.display = 'none';
    var fn = function(){ //展开一行 openRow
    statu=!statu;
    other(_other.rows[0],statu);
    other(_other.rows[1],statu);
    }
    document.getElementById("openRow").onclick= fn
    fn();
    }
    </script>


  • 相关阅读:
    SQL Server 索引基本概念与优化
    将Heap RID转换成RID格式
    有关DeadLock的文章列表
    sql报字段过大的错误解决方法
    查询当天数据(mysql)
    cookie和session的区别
    get和post的区别
    jq点击切换按钮最简洁代码
    js提示确认删除吗
    thinkphp解决分页后序列号自增的问题
  • 原文地址:https://www.cnblogs.com/haoxinchen/p/9530975.html
Copyright © 2011-2022 走看看