Skip to content

Zeroplex 生活隨筆

軟體開發、伺服器和生活瑣事

小 縮小字型大小。 中 重設字型大小。 大 放大字型大小。

jQuery.tmpl

Posted on 2012 年 10 月 14 日2021 年 3 月 12 日 By 日落 在〈jQuery.tmpl〉中尚無留言

之前提到用 jQuery 的 clone() 複製一列表格,再用 text() 修改該列的文字內容,但這個方法會經過多次 DOM 處理,效率不高。

經過阿育推薦後,發現 jQuery.tmpl() 樣板引擎還不賴,用起來不難且程式碼看起來會乾淨很多。

先定義表格一列的樣板:

<table id="target-table"> </table>

<script type="text/x-jquery-tmpl" id="row-template">
  <tr>
    <td>${name}</td>
    <td>${comment}</td>
  </tr>
</script>

在樣板中文字內容的位置使用 ${VARIABLE} 取代,tmpl() 會解析樣板內容並將資料填入。

接著透過 tmpl() 處理新增一列至表格最後方:

var data = {
   name: 'zeroplex',
   comment: 'some text'
};

$.tmpl( $('#row-template').html(), data)
    .insertAfter('#target-table > tbody > tr:last');

tmpl() 會自動將第二個傳入的參數對應到樣板變數,data.name 會被帶入 ${name}、data..comment 被帶入 ${comment},最後將處理完畢的資料放入原始頁面中。

Reference:.tmpl() – jQuery API
http://api.jquery.com/tmpl/

Tags:JavaScript, jQuery

文章導覽

Previous Post: C 強制資料輸出
Next Post: FreeBSD 系統時鐘停擺

發佈留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *


其他

關於我  (About me)

  文章 RSS Feed

  留言 RSS Feed

Apache AWS Bash C/C++ Docker FreeBSD GCP Git Google Java JavaScript Laravel Linux Microsoft MSSQL MySQL Nginx PHP PHPUnit PostgreSQL Python Qt Ubuntu Unix Vim Web Windows WordPress XD 作業系統 分享 好站推薦 專題 攝影 新奇搞笑 新聞 旅遊 生活雜記 程式設計 網路架站 網頁設計 資訊學習 資訊安全 遊戲 音樂


創用 CC 授權條款
本著作係採用創用 CC 姓名標示-相同方式分享 4.0 國際 授權條款授權.