django模板里迴圈變數<table>里想要兩個一行如何控制

来源:http://www.cnblogs.com/weridmaid/archive/2016/08/03/5733623.html
-Advertisement-
Play Games

2016-8-3 周三 做項目時遇到的問題: 每個div由迴圈變數輸出: {% for key,value in formextenddetail %} <div id="div_id_notes" class="value form-group row"> <div class="control- ...


2016-8-3 周三

做項目時遇到的問題:

每個div由迴圈變數輸出:

{% for key,value in formextenddetail %}
<div id="div_id_notes" class="value form-group row">
<div class="control-label">{{ key }}</div>
<div class="controls"><p class="form-control-static "><span class="text-muted"><font color="black">{{ value }}</font></span></p></div>
</div>
{% endfor %}

但是我想兩個div一行,使用

<table>

<tr>

<td><div></div></td>

<td><div></div></td>

</tr>

...

</table>

這種樣子

因為我負責的是前端,views這些不是很熟悉,想在template里直接控制,搜一下發現居然還不用直接用乘除或者mod計算,囧。

 

參考文章:http://blog.csdn.net/rain_qingtian/article/details/41076151

容易知道,Django模版加法:

{{ value|add:10}}

value=5,則返回15 Django模版減法:

{{value|add:-10}}

value=5,則返回-5,這個比較好理解,減法就是加一個負數 Django模版乘法:

{%  widthratio 5 1 100 %}

上面的代碼表示:5/1 *100,返回500,widthratio需要三個參數,它會使用 參數1/參數2*參數3,所以要進行乘法的話,就將參數2=1即可 Django模版除法

{%  widthratio 5 100 1 %}

上面的代碼表示:5/100*1,返回0.05,只需要將第三個參數設置為1即可。

但是這些方法用在除餘很麻煩。

解決方案:divisibleby標簽!

用django的divisibleby標簽實現,如下:

{% for each in somelist %}

{% if forloop.counter|divisibleby:2 %}

<div class=”class1″></div>

{% else %}

<div class=”class2″></div>

{% endif %}

{% endfor %}

divisibleby標簽的意義是用後面的參數去除,除盡為True,否則為False。

 

所以,我的代碼改為:

<table class="col-sm-12">
{% for key,value in formextenddetail %}
{% if forloop.counter|divisibleby:'2' %}
<td style="width: 50%" >
<div id="div_id_notes" class="value form-group row">
<div class="control-label">{{ key }}</div>
<div class="controls"><p class="form-control-static "><span class="text-muted"><font color="black">{{ value }}</font></span></p></div>
</div>
</td>
</tr>
{% else %}
<tr>
<td style="width: 50%" >
<div id="div_id_notes" class="value form-group row">
<div class="control-label">{{ key }}</div>
<div class="controls"><p class="form-control-static "><span class="text-muted"><font color="black">{{ value }}</font></span></p></div>
</div>
</td>

{% endif %}
{% endfor %}
</table>

 

這個解決方案同樣可以用在換行變樣式的情況等!

                                                    


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 自己遇到的使用window.open打開新視窗被攔截的幾種情況(使用的chrome瀏覽器,其他瀏覽器未測): 第一次:window.open("www.baidu.com"),打開了新視窗,但是頁面並沒有載入出來,需要回車才能出來 解決方法:頁面地址需要加上協議名稱http://或者https:// ...
  • 1. Object.createde 方法 是ES5中引入的方法,語法: 功能:實現繼承,創建一個 原型繼承 自參數對象,但是缺點是,不能實現復用 例如: 2. 對象的原型鏈 凡是對象就有原型,那麼原型又是對象,因此凡是定義一個對象,那麼就可以找到他的原型,原型還有原型, 那麼如此下去,就構成一個對 ...
  • <新人報到,歡迎拍磚#- -> 一、後代選擇器 說起CSS的後代選擇器。它屬於派生選擇器中的一種,兩者附屬關係如下: -->派生選擇器 CSS 後代選擇器 CSS 子元素選擇器 CSS 相鄰兄弟選擇器 那麼問題來了,什麼時候需要用到後代選擇器嘞?假設你需要為p元素中的span元素(.A類)設置特殊樣 ...
  • $(function(){ $("#userCenterProject").addClass("cur"); $(".hd ul li").click(function(){ var index=$(this).index(); $(this).addClass("on").siblings().r ...
  • 說在前面 工作中會遇到很多需要使用富文本編輯器的地方,比如我現在發佈這篇文章離不開這個神器,而且現在網上編輯器太多了。記得之前,由於工作需要自己封裝過一個編輯器的公共插件,是用ckeditor改版的,目的是要相容公司所有項目,使用方便。廢話不多說,今天寫這篇文章,一是總結自己學習複習,二是關於FTP ...
  • 使用ajax技術實現點擊按鈕,將TXT文本里的內容通過彈出框顯示到頁面上 /*事件會在頁面載入完成後觸發。*/ <script> window.onload = function(){ /*獲取按鈕的id*/ var oBth=document.getElementById(‘btn’); /*點擊 ...
  • 最近用H5進行手機端開發,由於是window操作系統,為了方便開發和調試,直接在chrome瀏覽器上進行測試,然後在android機上進行手機端測試,當功能基本完工後,原來在android上運行正常的應用,在IOS上運行時,出現很多奇怪的問題,根據排查,發現是由於cookie未取到值而導致相關信息無 ...
  • var LILL ={};//創建全局(function (wd) { function $(id) { return document.getElementById(id); } function alertNodeName(id) { alert($(id).nodeName); } var n ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...