jquery tmpl的施用

jquery tmpl的使用

1、引用jquery.tmpl.min.js

<script type="text/javascript" src="/js/jquery/jquery.tmpl.min.js"></script>

从https://github.com/jquery/jquery-tmpl下载

2、写模板的内容

<script id="titleTemplate" type="text/x-jquery-tmpl">
<tr class='odd' id="tr{{= randomid}}">
<td  align='center'></td>
        <td>
<input type='hidden' name='id' value='{{= id}}'/>
            <input type='text' name='shbhc' class="vesearchbox validate[required,maxSize[10]]" id='shbhc{{= randomid}}'  onclick="$.showShBox($(this),{valueField:'shbh{{= randomid}}'})" value='{{= shmc}}'/>
<input type='hidden' name='shbh' id="shbh{{= randomid}}" value='{{= shbh}}'/>
<font color="red">*</font>
</td>
        <td>
<select name="cpbh" style="100px" class="searchselect validate[required,maxSize[30]]" id="select{{= randomid}}">
<option value="">=全部=</option>
<c:forEach items="${cplist}" var="cp">
      <option value="${cp.cpbh}">${cp.cpmc }</option>
</c:forEach>
</select>
<font color="red">*</font>
</td>
        <td><input name='jzgy' class='inputtext validate[required,maxSize[500]]' id='jzgy' size='20'   value='{{= jzgy}}'/>
<font color="red">*</font>
</td>
        <td align='center'>
    <img src='/images/qk-del.gif' title='删除' style='cursor: pointer;' onclick="del('{{= randomid}}');"/>
        </td>
    </tr>
  </script>

3、点按钮触发

//修改 添加一行
function add(){
var randomid = new Date().getTime();//获取当前时间

       // {"id":"","shbh":"","jzgy":"","cpbh":"","shmc":"","randomid":randomid} 代表转入的参数

      //把模板名为titleTemplate，参数为 {"id":"","shbh":"","jzgy":"","cpbh":"","shmc":"","randomid":randomid} 的模板追加到tb2标签的后面。
$("#titleTemplate").tmpl( {"id":"","shbh":"","jzgy":"","cpbh":"","shmc":"","randomid":randomid} ).appendTo("#tb2");
}