在下面介绍一款jQuery的模板插件 tmpl，是由微软想jQuery官方贡献的模板插件，网址：。

    Tmpl提供了几种tag：

  1. ${}：等同于{
    {=}}，是输出变量，通过了html编码的。
  2. `html`:输出变量html,但是没有html编码，适合输出html代码。
  3. `if ` `else`:提供了分支逻辑。
  4. `each`:提供循环逻辑，$value访问迭代变量。

下面一个简单的模板tmpl实例：（代码最能说明一切）

效果：

代码：

 
    
     
         
  1. View Code   
    2.  
         
  2.  
    3.  
         
  3. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tmpl.aspx.cs" Inherits="Tmpl" %>  
    4.  
         
  4.  
    5.  
         
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    6.  
         
  6. <html xmlns="http://www.w3.org/1999/xhtml">  
    7.  
         
  7. <head runat="server">  
    8.  
         
  8.     <title></title>  
    9.  
         
  9.  
    10.  
         
  10.     <script src="Script/jquery-1.6.4.js" type="text/javascript"></script>  
    11.  
         
  11.  
    12.  
         
  12.     <script src="Script/jquery-jquery-tmpl-07d08cb/jquery.tmpl.js" type="text/javascript"></script>  
    13.  
         
  13.  
    14.  
         
  14.     <script id="studentsTemplate" type="text/x-jquery-tmpl">  
    15.  
         
  15.      <tr>  
    16.  
         
  16.                     <td style="width:20px;" >  
    17.  
         
  17.                  { 
          {if Class&&Class.length>0}}  <img src="Image/folder_o.png" class="detailsImg" />  { 
          {/if}}  
    18.  
         
  18.                     </td>  
    19.  
         
  19.                     <td>  
    20.  
         
  20.                      ${ 
          Name}  
    21.  
         
  21.                     </td>  
    22.  
         
  22.                     <td>  
    23.  
         
  23.                         ${Sex}  
    24.  
         
  24.                     </td>  
    25.  
         
  25.                     <td style="text-align:center;"><a href="javascript:AjaxDeleteInvoke(${ID})">删除</td>  
    26.  
         
  26.                 </tr>  
    27.  
         
  27.                 { 
          {if Class&&Class.length>0}}  
    28.  
         
  28.                 <tr><td colspan="4">  
    29.  
         
  29.                   
    30.  
         
  30.                 <table style=" margin:0px; " cellpadding="0" cellspacing="0" width="100%">  
    31.  
         
  31.             <thead>  
    32.  
         
  32.                 <tr style="text-align:center; font-size:large; font-weight:bolder;">  
    33.  
         
  33.                     <td>  
    34.  
         
  34.                         班级名  
    35.  
         
  35.                     </td>  
    36.  
         
  36.                     <td>  
    37.  
         
  37.                         人数  
    38.  
         
  38.                     </td>                      
    39.  
         
  39.                 </tr>  
    40.  
         
  40.             </thead>  
    41.  
         
  41.             <tbody>  
    42.  
         
  42.             { 
          {each Class}}             
    43.  
         
  43.            <tr { 
          {if $value.Count>16}} style="background:red;" { 
          { 
          else  $value.Count>12}}style="background:yellow;"  { 
          {/if}}><td> ${$value.ClassName} </td><td>  ${$value.Count} </td></tr>  
    44.  
         
  44.             { 
          {/each}}  
    45.  
         
  45.             </tbody></table>             
    46.  
         
  46.                 </td>    </tr>  
    47.  
         
  47.                  { 
          {/if}}  
    48.  
         
  48.     </script>  
    49.  
         
  49.  
    50.  
         
  50.     <script type="text/javascript">  
    51.  
         
  51.         ; String.format = function() {  
    52.  
         
  52.             var s = arguments[0];  
    53.  
         
  53.             for (var i = 0; i < arguments.length - 1; i++) {  
    54.  
         
  54.                 var reg = new RegExp("\\{" + i + "\\}", "gm");  
    55.  
         
  55.                 s = s.replace(reg, arguments[i + 1]);  
    56.  
         
  56.             }  
    57.  
         
  57.  
    58.  
         
  58.             return s;  
    59.  
         
  59.         };  
    60.  
         
  60.         function AjaxDeleteInvoke(id) {  
    61.  
         
  61.             alert(String.format("AjaxDeleteInvoke:id={0}", id));  
    62.  
         
  62.         }  
    63.  
         
  63.         $(function() {  
    64.  
         
  64.  
    65.  
         
  65.             var data = new Array();  
    66.  
         
  66.             for (var i = 0; i < 19; i++) {  
    67.  
         
  67.                 data.push(  
    68.  
         
  68.                 {  
    69.  
         
  69.                     Name: String.format("学生{0}", i),  
    70.  
         
  70.                     Sex: i % 2 == 0 ? "男" : "女",  
    71.  
         
  71.                     ID: i,  
    72.  
         
  72.                     Class:  
    73.  
         
  73.                     [  
    74.  
         
  74.                         {  
    75.  
         
  75.                             ClassName: String.format("Class{0}", i),  
    76.  
         
  76.                             Count: (i + 10) / 2  
    77.  
         
  77.                         },  
    78.  
         
  78.                          {  
    79.  
         
  79.                              ClassName: String.format("Class2{0}", i),  
    80.  
         
  80.                              Count: (i + 20) / 2  
    81.  
         
  81.                          }  
    82.  
         
  82.                    ]  
    83.  
         
  83.                 });  
    84.  
         
  84.             }  
    85.  
         
  85.             // alert($("#studentsTemplate").tmpl(data).htm());  
    86.  
         
  86.             $("#studentsTemplate").tmpl(data).appendTo("#test>tbody");  
    87.  
         
  87.             $("#test>tbody table").hide();  
    88.  
         
  88.             $(".detailsImg").live("click", function() {  
    89.  
         
  89.                 var state = $(this).data("state");  
    90.  
         
  90.                 var $tr = $(this).parent().parent();  
    91.  
         
  91.                 if (state == "o") {  
    92.  
         
  92.                     $("table", $tr.next()).hide();  
    93.  
         
  93.                     $(this).data("state", "c");  
    94.  
         
  94.  
    95.  
         
  95.                     $(this).attr("src", "Image/folder_o.png");  
    96.  
         
  96.                 } else {  
    97.  
         
  97.                     $("table", $tr.next()).show();  
    98.  
         
  98.                     $(this).data("state", "o");  
    99.  
         
  99.                     $(this).attr("src", "Image/folder_c.png");  
    100.  
         
  100.                 }  
    101.  
         
  101.             });  
    102.  
         
  102.         });    
    103.  
         
  103.     </script>  
    104.  
         
  104.  
    105.  
         
  105. </head>  
    106.  
         
  106. <body>  
    107.  
         
  107.     <form id="form1" runat="server">  
    108.  
         
  108.     <div id="div1">  
    109.  
         
  109.         <table style="margin-top: 10; margin-left: 300px;" border="1" cellpadding="0" cellspacing="0" 
    110.  
         
  110.             id="test" width="500">  
    111.  
         
  111.             <thead>  
    112.  
         
  112.                 <tr style="text-align: center; font-size: larger; font-weight: bolder;">  
    113.  
         
  113.                     <td>  
    114.  
         
  114.                         ID  
    115.  
         
  115.                     </td>  
    116.  
         
  116.                     <td>  
    117.  
         
  117.                         姓名  
    118.  
         
  118.                     </td>  
    119.  
         
  119.                     <td>  
    120.  
         
  120.                         性别  
    121.  
         
  121.                     </td>  
    122.  
         
  122.                     <td>  
    123.  
         
  123.                         操作  
    124.  
         
  124.                     </td>  
    125.  
         
  125.                 </tr>  
    126.  
         
  126.             </thead>  
    127.  
         
  127.             <tbody>  
    128.  
         
  128.             </tbody>  
    129.  
         
  129.         </table>  
    130.  
         
  130.     </div>  
    131.  
         
  131.     </form>  
    132.  
         
  132. </body>  
    133.  
         
  133. </html>  
    134.  
         
  134. 复制代码 
    135.  
        
 
    
 
    
其他资料jQuery目录：