目录
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>
时间： 2024-11-03 12:30:02