菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码:
点击运行
保存
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jquery.tmpl.min.js facesoho知行者</title> <link href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.staticfile.org/normalize/7.0.0/normalize.min.css" rel="stylesheet"><link href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><link href="/public/startbootstrap/css/modern-business.css" rel="stylesheet"> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> <div class="panel panel-default"> <div class="panel-heading">Panel heading</div> <table class="table" id="div_demo"> <tr> <td>ID</td> <td style="margin-left:6px;">Name</td> <td style="margin-left:6px;">Number</td> <td style="margin-left:6px;">Status</td> </tr> </table> </div> <script id="demo" type="text/x-jquery-tmpl"> <tr> <td>${ID}</td> <td style="margin-left:6px;">{{= Name}}</td> <td style="margin-left:6px;">${Number(Num)+1}</td> <td style="margin-left:6px;">${Status}</td> </tr> </script> <script type="text/javascript"> var users = [{ ID: '100', Name: 'Joseph', Num: '1', Status: 1 }, { ID: '200', Name: 'Mary', Num: '2', Status: 2}]; $("#demo").tmpl(users).appendTo('#div_demo'); </script> </body> </html>
运行结果