通过旧标签新属性能很好的简化列表。数据统一放到javascript的数据区，不影响html页面展示.
写了个简单模型，还不支持分页和排序，有待扩展!
示例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HelloWorld</title>
<script src="lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
<!-- 数据 -->
var dataMap = [{"name":"0001","password":"123456"},{"name":"0002","password":"654321"},{"name":"0003","password":"897456"}];
var userMap = {"0001":"天津","0002":"深圳","0003":"北京"}
<!-- 数据处理逻辑 -->
function changeName(val) {
return userMap[val];
}
$(document).ready(function (){
$("#ta").find("#def").each(function (i,n) {
var menu = $(n);
for (index in dataMap) {
var newTr = $(n).clone();
// --- 际记列表 ---
newTr.attr("item","true");
newTr.find("td").each(function(k,o){
if (o.bindingPattern != undefined || o.bindingPattern == "") {
try {
o.bindingPattern = o.bindingPattern.replace("[function]","");
o.innerHTML = eval(o.bindingPattern.replace("\{0\}","'" + dataMap[index][o.bindingData] + "'"));
} catch (e) {
alert(e);
}
} else {
o.innerHTML = dataMap[index][o.bindingData];
}
})
$("#ta").find("#def").after(newTr);
}
})
// --- 删除辅助标签 ---
$("#ta").find("#def").remove();
// --- 添加列表样式 ---
$("#ta").find("tr[@item]").each(function(l,it){
$(it).hover(function(){
$(it).addClass("blue");
},function(){
$(it).removeClass("blue");
})
})
})
</script>
<style type="text/css" media="screen">
.blue {}{ color: blue; }
</style>
</head>
<body>
<div id="head">
<h1>标题</h1>
</div>
<hr/>
<div id="conent">
<table border="0" cellspacing="5" cellpadding="5" id="ta">
<tbody>
<!-- 定制menu是为了使标题和下面的列表可以有不一样的样式布局 -->
<tr id="menu">
<td>用户名</td>
<td>密码</td>
</tr>
<!-- 用于数据绑定 -->
<tr id="def">
<td bindingData="name" bindingPattern="[function] changeName({0})"></td>
<td bindingData="password">d</td>
</tr>
<!-- 下面是其它的布局辅助绑定数据后依然位于表格底部 -->
<tr>
<td colspan="2"> --- 分页 ---</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>