标签：define charset variant href lan jquer doc cli src
目录
1、type="text/html" 的作用
2、实际的应用（jsp页面中循环出一个table表格）
3、完整的代码
内容
1、作用
在script标签中定义一个可以被JS调用的代码块，但是该代码又不会再页面上显示。
2、实际的应用
<script type="text/html" id="textHtmlDemo"> <tr id="textHtmlDemo{id}" data-id="{id}" class="ember-view variant-list-item table-row clear"> <td id="sequence" class="" data-id="{id}"> {sequence} </td> <td id="name" class="" data-id="{id}"> {name} </td> <td id="sex" class="" data-id="{id}"> {sex} </td> <td id="address" class="" data-id="{id}"> {address} </td> <td id="school" class="" data-id="{id}"> {school} </td> <td class="table-cell" id="operation"> <a class="add" data-id="{id}" href="javascript:;" >添加</a> <a class="delete" data-id="{id}" href="javascript:;" >删除</a> </td> </tr> </script>
上面的代码是在script标签中定义的可以被JavaScript代码调用的代码块，但是不会在页面中显示。我将其制作成tbody中某一行tr的模板，通过数据的不断循环进行渲染，最后直接插入到tbody中。
function doTemplate(str, o, regexp) { return str.replace(regexp || /\\?\{([^{{}}]+)\}/g, function(match, name) { return (o[name] === undefined) ? ‘‘ : o[name]; }); }
这段JavaScript代码的主要作用是将id 为textHtmlDemo的模板中被{}包裹的变量替换为实际的数据。
3、代码示例（完整版）
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>text/html构建动态表格</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" /> </head> <body> <div class="text-html-demo"> <div class="container"> <div class="row"> <table class="table table-hover"> <thead> <tr > <th>序号</th> <th>姓名</th> <th>性别</th> <th>出生地</th> <th>学校</th> <th>操作</th> </tr> </thead> <tbody class="text_demo_tbody"></tbody> </table> </div> </div> </div> <script src="http://code.jquery.com/jquery.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript"> var data={ resultList:[ {"id":111,"sequence":1,"name":"Cassie","sex":"Female","address":"WH","school":"WD"}, {"id":222,"sequence":2,"name":"Cassie2","sex":"Male","address":"WH","school":"WD"}, {"id":333,"sequence":3,"name":"Cassie3","sex":"Female","address":"WH","school":"WD"}, {"id":444,"sequence":4,"name":"Cassie4","sex":"Male","address":"WH","school":"WD"}, {"id":555,"sequence":5,"name":"Cassie5","sex":"Female","address":"WH","school":"WD"} ] } $(document).ready(function() { /*加载出table的表格数据*/ loadData(); }); /*动态填充表格*/ function loadData(){ /*清空tbody中的数据*/ $(‘.text_demo_tbody‘).empty(); var tmp = []; var template = $(‘#textHtmlDemo‘).html(); for (i = 0; i < data.resultList.length; i++) { var item = data.resultList[i]; var tpldata = { "sequence": item.sequence ? item.sequence : "", "name": item.name ? item.name : "", "sex": item.sex ? item.sex : "", "address": item.address ? item.address : "", "school": item.name ? item.name : "", "id": item.id ? item.id : "" }; var content = doTemplate(template, tpldata); tmp.push(content); } var html = tmp.join(‘‘); $(‘.text_demo_tbody‘).prepend(html); } /*将{}包裹的变量替换成实际的数据*/ function doTemplate(str, o, regexp) { return str.replace(regexp || /\\?\{([^{{}}]+)\}/g, function(match, name) { return (o[name] === undefined) ? ‘‘ : o[name]; }); } /*表格行的添加事件*/ $("body").on("click", ".add", function() { data.resultList.push({ "id":new Date().getTime(), "sequence":"sequence", "name":"name", "sex":"sex", "address":"address", "school":"school" }); loadData(); }); /*表格行的删除事件*/ $("body").on("click", ".delete", function() { /*拿到当前点击行的ID*/ var currentRowId = $(this).data("id"); alert($(this).data("id")); }); </script> <script type="text/html" id="textHtmlDemo"> <tr id="textHtmlDemo{id}" data-id="{id}" class="ember-view variant-list-item table-row clear"> <td id="sequence" class="" data-id="{id}"> {sequence} </td> <td id="name" class="" data-id="{id}"> {name} </td> <td id="sex" class="" data-id="{id}"> {sex} </td> <td id="address" class="" data-id="{id}"> {address} </td> <td id="school" class="" data-id="{id}"> {school} </td> <td class="table-cell" id="operation"> <a class="add" data-id="{id}" href="javascript:;" >添加</a> <a class="delete" data-id="{id}" href="javascript:;" >删除</a> </td> </tr> </script> </body> </html>
script中 type="text/html" 有哪些作用
标签：define charset variant href lan jquer doc cli src
原文地址：http://www.cnblogs.com/leijing0607/p/7493927.html
