大家好，又见面了，我是你们的朋友全栈君。
juqery的temp插件使用
jquery.tmpl.js使用
juery因丰富的插件曾被广泛使用，这里介绍一下jQuery模板的使用方法，用到jquery.tmpl.js插件。
入门
<head>
<meta charset="UTF-8">
<title>temp-demo</title>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./third_plugin/jquery.tmpl.min.js"></script>
</head>
<body>
<div>
///3、定义一个容器
<table border="1px" id="demo_table"></table>
</div>
<script type="text/javascript">
//4、定义一个模板
var temp = '<tr>' +
'<td >${ID}</td>' +
'<td >${Name}</td>' +
'<td >${Num}</td>' +
'<td >${Status}</td>' +
'<td >${description}</td>' +
'</tr>';
//5、注册模板
$.template("temp",temp);
//6、数据源
var users = [{ID: 'chuizi', Name: 'Joseph Chan', Num: '1', Status: 1 , description:"这是一个测试代码"}, {
ID: 'aCloud',Name: 'Mary ai云', Num: '3', Status: 1 , description:"这是一个测试代码"}, {
ID: 'apple',Name: 'Mary 蘋果', Num: '2', Status: 1 , description:"这是一个测试代码"}, {
ID: 'mi',Name: 'Mary 小米', Num: '6', Status: 1 , description:"这是一个测试代码"}, {
ID: 'huawei',Name: 'Mary 荣耀', Num: '8', Status: 1 , description:"这是一个测试代码"}, ];
///7、结果渲染
$("#demo_table").html($.tmpl("temp",users))
</script>
</body>
步骤
1.创建一个HTML文件；
2. 引入 jquery-1.7.1.min.js 和 jquery.tmpl.min.js ；
3. 定义一个table容器用于封装模板结果（也可以用其他的容器，我这里复用项目中的代码）；
4. 定义一个模板，我这里赋值给了一个变量，其实也可以放在script标签中，通过id调用；
5. 注册模板，用 $.template() 方法注册；
6.构造一个json格式的数据源；
7. 将数据渲染到目标容器中；
参考文档
链接: jquery tmpl 详解.
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/150535.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...