大家好，又见面了，我是你们的朋友全栈君。
juqery的temp插件使用
jquery.tmpl.js使用
juery因丰富的插件曾被广泛使用，这里介绍一下jQuery模板的使用方法，用到jquery.tmpl.js插件。
入门
代码语言：javascript复制<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 详解.
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/150535.html原文链接：https://javaforall.cn
